test_aria_menu.html (8721B)
1 <html> 2 3 <head> 4 <title>ARIA menu events testing</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="../role.js"></script> 16 <script type="application/javascript" 17 src="../states.js"></script> 18 <script type="application/javascript" 19 src="../events.js"></script> 20 21 <script type="application/javascript"> 22 const kViaDisplayStyle = 0; 23 const kViaVisibilityStyle = 1; 24 25 function focusMenu(aMenuBarID, aMenuID, aActiveMenuBarID) { 26 this.eventSeq = []; 27 28 if (aActiveMenuBarID) { 29 this.eventSeq.push(new invokerChecker(EVENT_MENU_END, 30 getNode(aActiveMenuBarID))); 31 } 32 33 this.eventSeq.push(new invokerChecker(EVENT_MENU_START, getNode(aMenuBarID))); 34 this.eventSeq.push(new invokerChecker(EVENT_FOCUS, getNode(aMenuID))); 35 36 this.invoke = function focusMenu_invoke() { 37 getNode(aMenuID).focus(); 38 }; 39 40 this.getID = function focusMenu_getID() { 41 return "focus menu '" + aMenuID + "'"; 42 }; 43 } 44 45 function showMenu(aMenuID, aParentMenuID, aHow) { 46 this.menuNode = getNode(aMenuID); 47 48 // Because of aria-owns processing we may have menupopup start fired before 49 // related show event. 50 this.eventSeq = [ 51 new invokerChecker(EVENT_SHOW, this.menuNode), 52 new invokerChecker(EVENT_REORDER, getNode(aParentMenuID)), 53 new invokerChecker(EVENT_MENUPOPUP_START, this.menuNode), 54 ]; 55 56 this.invoke = function showMenu_invoke() { 57 if (aHow == kViaDisplayStyle) 58 this.menuNode.style.display = "block"; 59 else 60 this.menuNode.style.visibility = "visible"; 61 }; 62 63 this.getID = function showMenu_getID() { 64 return "Show ARIA menu '" + aMenuID + "' by " + 65 (aHow == kViaDisplayStyle ? "display" : "visibility") + 66 " style tricks"; 67 }; 68 } 69 70 function closeMenu(aMenuID, aParentMenuID, aHow) { 71 this.menuNode = getNode(aMenuID); 72 this.menu = null; 73 74 this.eventSeq = [ 75 new invokerChecker(EVENT_MENUPOPUP_END, getMenu, this), 76 new invokerChecker(EVENT_HIDE, getMenu, this), 77 new invokerChecker(EVENT_REORDER, getNode(aParentMenuID)), 78 ]; 79 80 this.invoke = function closeMenu_invoke() { 81 // Store menu accessible reference while menu is still open. 82 this.menu = getAccessible(this.menuNode); 83 84 // Hide menu. 85 if (aHow == kViaDisplayStyle) 86 this.menuNode.style.display = "none"; 87 else 88 this.menuNode.style.visibility = "hidden"; 89 }; 90 91 this.getID = function closeMenu_getID() { 92 return "Close ARIA menu " + aMenuID + " by " + 93 (aHow == kViaDisplayStyle ? "display" : "visibility") + 94 " style tricks"; 95 }; 96 97 function getMenu(aThisObj) { 98 return aThisObj.menu; 99 } 100 } 101 102 function focusInsideMenu(aMenuID, aMenuBarID) { 103 this.eventSeq = [ 104 new invokerChecker(EVENT_FOCUS, getNode(aMenuID)), 105 ]; 106 107 this.unexpectedEventSeq = [ 108 new invokerChecker(EVENT_MENU_END, getNode(aMenuBarID)), 109 ]; 110 111 this.invoke = function focusInsideMenu_invoke() { 112 getNode(aMenuID).focus(); 113 }; 114 115 this.getID = function focusInsideMenu_getID() { 116 return "focus menu '" + aMenuID + "'"; 117 }; 118 } 119 120 function blurMenu(aMenuBarID) { 121 var eventSeq = [ 122 new invokerChecker(EVENT_MENU_END, getNode(aMenuBarID)), 123 new invokerChecker(EVENT_FOCUS, getNode("outsidemenu")), 124 ]; 125 126 this.__proto__ = new synthClick("outsidemenu", eventSeq); 127 128 this.getID = function blurMenu_getID() { 129 return "blur menu"; 130 }; 131 } 132 133 // ////////////////////////////////////////////////////////////////////////// 134 // Do tests 135 136 // gA11yEventDumpToConsole = true; // debuging 137 // enableLogging("tree,events,verbose"); 138 139 var gQueue = null; 140 function doTests() { 141 gQueue = new eventQueue(); 142 143 gQueue.push(new focusMenu("menubar2", "menu-help")); 144 gQueue.push(new focusMenu("menubar", "menu-file", "menubar2")); 145 gQueue.push(new showMenu("menupopup-file", "menu-file", kViaDisplayStyle)); 146 gQueue.push(new closeMenu("menupopup-file", "menu-file", kViaDisplayStyle)); 147 gQueue.push(new showMenu("menupopup-edit", "menu-edit", kViaVisibilityStyle)); 148 gQueue.push(new closeMenu("menupopup-edit", "menu-edit", kViaVisibilityStyle)); 149 gQueue.push(new focusInsideMenu("menu-edit", "menubar")); 150 gQueue.push(new blurMenu("menubar")); 151 152 gQueue.push(new focusMenu("menubar3", "mb3-mi-outside")); 153 gQueue.push(new showMenu("mb4-menu", document, kViaDisplayStyle)); 154 gQueue.push(new focusMenu("menubar4", "mb4-item1")); 155 gQueue.push(new focusMenu("menubar5", "mb5-mi")); 156 157 gQueue.push(new synthFocus("mi6")); 158 159 gQueue.invoke(); // Will call SimpleTest.finish(); 160 } 161 162 SimpleTest.waitForExplicitFinish(); 163 addA11yLoadEvent(doTests); 164 </script> 165 </head> 166 167 <body> 168 169 <a target="_blank" 170 href="https://bugzilla.mozilla.org/show_bug.cgi?id=606207" 171 title="Dojo dropdown buttons are broken"> 172 Bug 606207 173 </a> 174 <a target="_blank" 175 href="https://bugzilla.mozilla.org/show_bug.cgi?id=614829" 176 title="Menupopup end event isn't fired for ARIA menus"> 177 Bug 614829 178 </a> 179 <a target="_blank" 180 href="https://bugzilla.mozilla.org/show_bug.cgi?id=615189" 181 title="Clean up FireAccessibleFocusEvent"> 182 Bug 615189 183 </a> 184 <a target="_blank" 185 href="https://bugzilla.mozilla.org/show_bug.cgi?id=673958" 186 title="Rework accessible focus handling"> 187 Bug 673958 188 </a> 189 <a target="_blank" 190 href="https://bugzilla.mozilla.org/show_bug.cgi?id=933322" 191 title="menustart/end events are missing when aria-owns makes a menu hierarchy"> 192 Bug 933322 193 </a> 194 <a target="_blank" 195 href="https://bugzilla.mozilla.org/show_bug.cgi?id=934460" 196 title="menustart/end events may be missed when top level menuitem is focused"> 197 Bug 934460 198 </a> 199 <a target="_blank" 200 href="https://bugzilla.mozilla.org/show_bug.cgi?id=970005" 201 title="infinite long loop in a11y:FocusManager::ProcessFocusEvent"> 202 Bug 970005 203 </a> 204 205 <p id="display"></p> 206 <div id="content" style="display: none"></div> 207 <pre id="test"> 208 </pre> 209 210 <div id="menubar" role="menubar"> 211 <div id="menu-file" role="menuitem" tabindex="0"> 212 File 213 <div id="menupopup-file" role="menu" style="display: none;"> 214 <div id="menuitem-newtab" role="menuitem" tabindex="0">New Tab</div> 215 <div id="menuitem-newwindow" role="menuitem" tabindex="0">New Window</div> 216 </div> 217 </div> 218 <div id="menu-edit" role="menuitem" tabindex="0"> 219 Edit 220 <div id="menupopup-edit" role="menu" style="visibility: hidden;"> 221 <div id="menuitem-undo" role="menuitem" tabindex="0">Undo</div> 222 <div id="menuitem-redo" role="menuitem" tabindex="0">Redo</div> 223 </div> 224 </div> 225 </div> 226 <div id="menubar2" role="menubar"> 227 <div id="menu-help" role="menuitem" tabindex="0"> 228 Help 229 <div id="menupopup-help" role="menu" style="display: none;"> 230 <div id="menuitem-about" role="menuitem" tabindex="0">About</div> 231 </div> 232 </div> 233 </div> 234 <div tabindex="0" id="outsidemenu">outsidemenu</div> 235 236 <!-- aria-owns relations --> 237 <div id="menubar3" role="menubar" aria-owns="mb3-mi-outside"></div> 238 <div id="mb3-mi-outside" role="menuitem" tabindex="0">Outside</div> 239 240 <div id="menubar4" role="menubar"> 241 <div id="mb4_topitem" role="menuitem" aria-haspopup="true" 242 aria-owns="mb4-menu">Item</div> 243 </div> 244 <div id="mb4-menu" role="menu" style="display:none;"> 245 <div role="menuitem" id="mb4-item1" tabindex="0">Item 1.1</div> 246 <div role="menuitem" tabindex="0">Item 1.2</div> 247 </div> 248 249 <!-- focus top-level menu item having haspopup --> 250 <div id="menubar5" role="menubar"> 251 <div role="menuitem" aria-haspopup="true" id="mb5-mi" tabindex="0"> 252 Item 253 <div role="menu" style="display:none;"> 254 <div role="menuitem" tabindex="0">Item 1.1</div> 255 <div role="menuitem" tabindex="0">Item 1.2</div> 256 </div> 257 </div> 258 </div> 259 260 <!-- other aria-owns relations --> 261 <div id="mi6" tabindex="0" role="menuitem">aria-owned item</div> 262 <div aria-owns="mi6">Obla</div> 263 264 <div id="eventdump"></div> 265 266 </body> 267 </html>