test_focus_name.html (3496B)
1 <html> 2 3 <head> 4 <title>Accessible name testing on focus</title> 5 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script> 11 12 <script type="application/javascript" 13 src="../common.js"></script> 14 <script type="application/javascript" 15 src="../events.js"></script> 16 17 <script type="application/javascript"> 18 /** 19 * Checker for invokers. 20 */ 21 function actionChecker(aID, aDescription) { 22 this.__proto__ = new invokerChecker(EVENT_FOCUS, aID); 23 24 this.check = function actionChecker_check(aEvent) { 25 var target = aEvent.accessible; 26 is(target.description, aDescription, 27 "Wrong description for " + prettyName(target)); 28 }; 29 } 30 31 var gFocusHandler = { 32 handleEvent: function gFocusHandler_handleEvent(aEvent) { 33 var elm = aEvent.target; 34 if (elm.nodeType != Node.ELEMENT_NODE) 35 return; 36 37 gTooltipElm.style.display = "block"; 38 39 elm.setAttribute("aria-describedby", "tooltip"); 40 }, 41 }; 42 43 var gBlurHandler = { 44 handleEvent: function gBlurHandler_handleEvent(aEvent) { 45 gTooltipElm.style.display = "none"; 46 47 var elm = aEvent.target; 48 if (elm.nodeType == Node.ELEMENT_NODE) 49 elm.removeAttribute("aria-describedby"); 50 }, 51 }; 52 53 /** 54 * Do tests. 55 */ 56 57 // gA11yEventDumpID = "eventdump"; // debug stuff 58 // gA11yEventDumpToConsole = true; 59 60 var gQueue = null; 61 62 var gButtonElm = null; 63 var gTextboxElm = null; 64 var gTooltipElm = null; 65 66 function doTests() { 67 gButtonElm = getNode("button"); 68 gTextboxElm = getNode("textbox"); 69 gTooltipElm = getNode("tooltip"); 70 71 gButtonElm.addEventListener("focus", gFocusHandler); 72 gButtonElm.addEventListener("blur", gBlurHandler); 73 gTextboxElm.addEventListener("focus", gFocusHandler); 74 gTextboxElm.addEventListener("blur", gBlurHandler); 75 76 // The aria-describedby is changed on DOM focus. Accessible description 77 // should be updated when a11y focus is fired. 78 gQueue = new eventQueue(nsIAccessibleEvent.EVENT_FOCUS); 79 gQueue.onFinish = function() { 80 gButtonElm.removeEventListener("focus", gFocusHandler); 81 gButtonElm.removeEventListener("blur", gBlurHandler); 82 gTextboxElm.removeEventListener("focus", gFocusHandler); 83 gTextboxElm.removeEventListener("blur", gBlurHandler); 84 }; 85 86 var descr = "It's a tooltip"; 87 gQueue.push(new synthFocus("button", new actionChecker("button", descr))); 88 gQueue.push(new synthTab("textbox", new actionChecker("textbox", descr))); 89 90 gQueue.invoke(); // Will call SimpleTest.finish(); 91 } 92 93 SimpleTest.waitForExplicitFinish(); 94 addA11yLoadEvent(doTests); 95 </script> 96 </head> 97 98 <body> 99 100 <a target="_blank" 101 href="https://bugzilla.mozilla.org/show_bug.cgi?id=520709" 102 title="mochitest to ensure name/description are updated on a11y focus if they were changed on DOM focus"> 103 Mozilla Bug 520709 104 </a> 105 <p id="display"></p> 106 <div id="content" style="display: none"></div> 107 <pre id="test"> 108 </pre> 109 110 <div id="tooltip" style="display: none" aria-hidden="true">It's a tooltip</div> 111 <button id="button">button</button> 112 <input id="textbox"> 113 114 <div id="eventdump"></div> 115 </body> 116 </html>