1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/events/test_focus_name.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,122 @@
1.4 +<html>
1.5 +
1.6 +<head>
1.7 + <title>Accessible name testing on focus</title>
1.8 +
1.9 + <link rel="stylesheet" type="text/css"
1.10 + href="chrome://mochikit/content/tests/SimpleTest/test.css" />
1.11 +
1.12 + <script type="application/javascript"
1.13 + src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.14 + <script type="application/javascript"
1.15 + src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
1.16 +
1.17 + <script type="application/javascript"
1.18 + src="../common.js"></script>
1.19 + <script type="application/javascript"
1.20 + src="../events.js"></script>
1.21 +
1.22 + <script type="application/javascript">
1.23 + /**
1.24 + * Checker for invokers.
1.25 + */
1.26 + function actionChecker(aID, aDescription)
1.27 + {
1.28 + this.__proto__ = new invokerChecker(EVENT_FOCUS, aID);
1.29 +
1.30 + this.check = function actionChecker_check(aEvent)
1.31 + {
1.32 + var target = aEvent.accessible;
1.33 + is(target.description, aDescription,
1.34 + "Wrong description for " + prettyName(target));
1.35 + }
1.36 + }
1.37 +
1.38 + var gFocusHandler = {
1.39 + handleEvent: function gFocusHandler_handleEvent(aEvent) {
1.40 + var elm = aEvent.target;
1.41 + if (elm.nodeType != nsIDOMNode.ELEMENT_NODE)
1.42 + return;
1.43 +
1.44 + gTooltipElm.style.display = "block";
1.45 +
1.46 + elm.setAttribute("aria-describedby", "tooltip");
1.47 + }
1.48 + };
1.49 +
1.50 + var gBlurHandler = {
1.51 + handleEvent: function gBlurHandler_handleEvent(aEvent) {
1.52 + gTooltipElm.style.display = "none";
1.53 +
1.54 + var elm = aEvent.target;
1.55 + if (elm.nodeType == nsIDOMNode.ELEMENT_NODE)
1.56 + elm.removeAttribute("aria-describedby");
1.57 + }
1.58 + };
1.59 +
1.60 + /**
1.61 + * Do tests.
1.62 + */
1.63 +
1.64 + // gA11yEventDumpID = "eventdump"; // debug stuff
1.65 + //gA11yEventDumpToConsole = true;
1.66 +
1.67 + var gQueue = null;
1.68 +
1.69 + var gButtonElm = null;
1.70 + var gTextboxElm = null;
1.71 + var gTooltipElm = null;
1.72 +
1.73 + function doTests()
1.74 + {
1.75 + gButtonElm = getNode("button");
1.76 + gTextboxElm = getNode("textbox");
1.77 + gTooltipElm = getNode("tooltip");
1.78 +
1.79 + gButtonElm.addEventListener("focus", gFocusHandler, false);
1.80 + gButtonElm.addEventListener("blur", gBlurHandler, false);
1.81 + gTextboxElm.addEventListener("focus", gFocusHandler, false);
1.82 + gTextboxElm.addEventListener("blur", gBlurHandler, false);
1.83 +
1.84 + // The aria-describedby is changed on DOM focus. Accessible description
1.85 + // should be updated when a11y focus is fired.
1.86 + gQueue = new eventQueue(nsIAccessibleEvent.EVENT_FOCUS);
1.87 + gQueue.onFinish = function()
1.88 + {
1.89 + gButtonElm.removeEventListener("focus", gFocusHandler, false);
1.90 + gButtonElm.removeEventListener("blur", gBlurHandler, false);
1.91 + gTextboxElm.removeEventListener("focus", gFocusHandler, false);
1.92 + gTextboxElm.removeEventListener("blur", gBlurHandler, false);
1.93 + }
1.94 +
1.95 + var descr = "It's a tooltip";
1.96 + gQueue.push(new synthFocus("button", new actionChecker("button", descr)));
1.97 + gQueue.push(new synthTab("textbox", new actionChecker("textbox", descr)));
1.98 +
1.99 + gQueue.invoke(); // Will call SimpleTest.finish();
1.100 + }
1.101 +
1.102 + SimpleTest.waitForExplicitFinish();
1.103 + addA11yLoadEvent(doTests);
1.104 + </script>
1.105 +</head>
1.106 +
1.107 +<body>
1.108 +
1.109 + <a target="_blank"
1.110 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=520709"
1.111 + title="mochitest to ensure name/description are updated on a11y focus if they were changed on DOM focus">
1.112 + Mozilla Bug 520709
1.113 + </a>
1.114 + <p id="display"></p>
1.115 + <div id="content" style="display: none"></div>
1.116 + <pre id="test">
1.117 + </pre>
1.118 +
1.119 + <div id="tooltip" style="display: none" aria-hidden="true">It's a tooltip</div>
1.120 + <button id="button">button</button>
1.121 + <input id="textbox">
1.122 +
1.123 + <div id="eventdump"></div>
1.124 +</body>
1.125 +</html>
