test_selection_aria.html (3716B)
1 <html> 2 3 <head> 4 <title>ARIA selection event 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="../events.js"></script> 16 <script type="application/javascript" 17 src="../role.js"></script> 18 <script type="application/javascript" 19 src="../states.js"></script> 20 21 <script type="application/javascript"> 22 // ////////////////////////////////////////////////////////////////////////// 23 // Invokers 24 25 function selectItem(aSelectID, aItemID) { 26 this.selectNode = getNode(aSelectID); 27 this.itemNode = getNode(aItemID); 28 29 this.eventSeq = [ 30 new invokerChecker(EVENT_SELECTION, aItemID), 31 ]; 32 33 this.invoke = function selectItem_invoke() { 34 var itemNode = this.selectNode.querySelector("*[aria-selected='true']"); 35 if (itemNode) 36 itemNode.removeAttribute("aria-selected"); 37 38 this.itemNode.setAttribute("aria-selected", "true"); 39 }; 40 41 this.getID = function selectItem_getID() { 42 return "select item " + prettyName(aItemID); 43 }; 44 } 45 46 // ////////////////////////////////////////////////////////////////////////// 47 // Do tests 48 49 var gQueue = null; 50 51 // gA11yEventDumpToConsole = true; // debug stuff 52 53 function doTests() { 54 gQueue = new eventQueue(); 55 56 gQueue.push(new selectItem("tablist", "tab1")); 57 gQueue.push(new selectItem("tablist", "tab2")); 58 59 gQueue.push(new selectItem("tree", "treeitem1")); 60 gQueue.push(new selectItem("tree", "treeitem1a")); 61 gQueue.push(new selectItem("tree", "treeitem1a1")); 62 63 gQueue.push(new selectItem("tree2", "tree2item1")); 64 gQueue.push(new selectItem("tree2", "tree2item1a")); 65 gQueue.push(new selectItem("tree2", "tree2item1a1")); 66 67 gQueue.invoke(); // Will call SimpleTest.finish(); 68 } 69 70 SimpleTest.waitForExplicitFinish(); 71 addA11yLoadEvent(doTests); 72 </script> 73 </head> 74 75 <body> 76 77 <a target="_blank" 78 href="https://bugzilla.mozilla.org/show_bug.cgi?id=569653" 79 title="Make selection events async"> 80 Mozilla Bug 569653 81 </a> 82 <a target="_blank" 83 href="https://bugzilla.mozilla.org/show_bug.cgi?id=804040" 84 title="Selection event not fired when selection of ARIA tab changes"> 85 Mozilla Bug 804040 86 </a> 87 88 <p id="display"></p> 89 <div id="content" style="display: none"></div> 90 <pre id="test"> 91 </pre> 92 93 <div role="tablist" id="tablist"> 94 <div role="tab" id="tab1">tab1</div> 95 <div role="tab" id="tab2">tab2</div> 96 </div> 97 98 <div id="tree" role="tree"> 99 <div id="treeitem1" role="treeitem">Canada 100 <div id="treeitem1a" role="treeitem">- Ontario 101 <div id="treeitem1a1" role="treeitem">-- Toronto</div> 102 </div> 103 <div id="treeitem1b" role="treeitem">- Manitoba</div> 104 </div> 105 <div id="treeitem2" role="treeitem">Germany</div> 106 <div id="treeitem3" role="treeitem">Russia</div> 107 </div> 108 109 <div id="tree2" role="tree" aria-multiselectable="true"> 110 <div id="tree2item1" role="treeitem">Canada 111 <div id="tree2item1a" role="treeitem">- Ontario 112 <div id="tree2item1a1" role="treeitem">-- Toronto</div> 113 </div> 114 <div id="tree2item1b" role="treeitem">- Manitoba</div> 115 </div> 116 <div id="tree2item2" role="treeitem">Germany</div> 117 <div id="tree2item3" role="treeitem">Russia</div> 118 </div> 119 120 <div id="eventdump"></div> 121 </body> 122 </html>