gecko-dev/accessible/tests/mochitest/events/test_focus_name.html
Alexander Surkov 85f57ffd5d Bug 673958 - rework accessible focus handling, r=enndeaking, marcoz, tbsaunde, matspal, f=marcoz
--HG--
rename : accessible/tests/mochitest/test_aria_activedescendant.html => accessible/tests/mochitest/events/test_focus_aria_activedescendant.html
rename : accessible/tests/mochitest/events/test_focus.html => accessible/tests/mochitest/events/test_focus_dialog.html
rename : accessible/tests/mochitest/events/test_focusdoc.html => accessible/tests/mochitest/events/test_focus_doc.html
rename : accessible/tests/mochitest/events/test_focus.xul => accessible/tests/mochitest/events/test_focus_general.xul
rename : accessible/tests/mochitest/states/test_comboboxes.xul => accessible/tests/mochitest/states/test_expandable.xul
rename : accessible/tests/mochitest/test_nsIAccessible_selects.html => accessible/tests/mochitest/states/test_selects.html
2011-09-28 10:46:11 +09:00

123 lines
3.6 KiB
HTML

<html>
<head>
<title>Accessible name testing on focus</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="../events.js"></script>
<script type="application/javascript">
/**
* Checker for invokers.
*/
function actionChecker(aID, aDescription)
{
this.__proto__ = new invokerChecker(EVENT_FOCUS, aID);
this.check = function actionChecker_check(aEvent)
{
var target = aEvent.accessible;
is(target.description, aDescription,
"Wrong description for " + prettyName(target));
}
}
var gFocusHandler = {
handleEvent: function gFocusHandler_handleEvent(aEvent) {
var elm = aEvent.target;
if (elm.nodeType != nsIDOMNode.ELEMENT_NODE)
return;
gTooltipElm.style.display = "block";
elm.setAttribute("aria-describedby", "tooltip");
}
};
var gBlurHandler = {
handleEvent: function gBlurHandler_handleEvent(aEvent) {
gTooltipElm.style.display = "none";
var elm = aEvent.target;
if (elm.nodeType == nsIDOMNode.ELEMENT_NODE)
elm.removeAttribute("aria-describedby");
}
};
/**
* Do tests.
*/
// gA11yEventDumpID = "eventdump"; // debug stuff
//gA11yEventDumpToConsole = true;
var gQueue = null;
var gButtonElm = null;
var gTextboxElm = null;
var gTooltipElm = null;
function doTests()
{
gButtonElm = getNode("button");
gTextboxElm = getNode("textbox");
gTooltipElm = getNode("tooltip");
gButtonElm.addEventListener("focus", gFocusHandler, false);
gButtonElm.addEventListener("blur", gBlurHandler, false);
gTextboxElm.addEventListener("focus", gFocusHandler, false);
gTextboxElm.addEventListener("blur", gBlurHandler, false);
// The aria-describedby is changed on DOM focus. Accessible description
// should be updated when a11y focus is fired.
gQueue = new eventQueue(nsIAccessibleEvent.EVENT_FOCUS);
gQueue.onFinish = function()
{
gButtonElm.removeEventListener("focus", gFocusHandler, false);
gButtonElm.removeEventListener("blur", gBlurHandler, false);
gTextboxElm.removeEventListener("focus", gFocusHandler, false);
gTextboxElm.removeEventListener("blur", gBlurHandler, false);
}
var descr = "It's a tooltip";
gQueue.push(new synthFocus("button", new actionChecker("button", descr)));
gQueue.push(new synthTab("textbox", new actionChecker("textbox", descr)));
gQueue.invoke(); // Will call SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTests);
</script>
</head>
<body>
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=520709"
title="mochitest to ensure name/description are updated on a11y focus if they were changed on DOM focus">
Mozilla Bug 520709
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test">
</pre>
<div id="tooltip" style="display: none" aria-hidden="true">It's a tooltip</div>
<button id="button">button</button>
<input id="textbox">
<div id="eventdump"></div>
</body>
</html>