test_aria_widgetitems.html (6037B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Test ARIA tab accessible selected state</title> 6 7 <link rel="stylesheet" type="text/css" 8 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.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 function focusARIAItem(aID, aIsSelected) { 23 this.DOMNode = getNode(aID); 24 25 this.invoke = function focusARIAItem_invoke() { 26 this.DOMNode.focus(); 27 }; 28 29 this.check = function focusARIAItem_check() { 30 testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0, 31 aIsSelected ? 0 : STATE_SELECTED); 32 }; 33 34 this.getID = function focusARIAItem_getID() { 35 return "Focused ARIA widget item with aria-selected='" + 36 (aIsSelected ? "true', should" : "false', shouldn't") + 37 " have selected state on " + prettyName(aID); 38 }; 39 } 40 41 function focusActiveDescendantItem(aItemID, aWidgetID, aIsSelected) { 42 this.DOMNode = getNode(aItemID); 43 this.widgetDOMNode = getNode(aWidgetID); 44 45 this.invoke = function focusActiveDescendantItem_invoke() { 46 this.widgetDOMNode.setAttribute("aria-activedescendant", aItemID); 47 this.widgetDOMNode.focus(); 48 }; 49 50 this.check = function focusActiveDescendantItem_check() { 51 testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0, 52 aIsSelected ? 0 : STATE_SELECTED); 53 }; 54 55 this.getID = function tabActiveDescendant_getID() { 56 return "ARIA widget item managed by activedescendant " + 57 (aIsSelected ? "should" : "shouldn't") + 58 " have the selected state on " + prettyName(aItemID); 59 }; 60 } 61 62 // ////////////////////////////////////////////////////////////////////////// 63 // Test 64 65 // gA11yEventDumpID = "eventdump"; // debug stuff 66 // gA11yEventDumpToConsole = true; 67 68 var gQueue = null; 69 70 function doTest() { 71 // aria-selected 72 testStates("aria_tab1", 0, 0, STATE_SELECTED); 73 testStates("aria_tab2", STATE_SELECTED); 74 testStates("aria_tab3", 0, 0, STATE_SELECTED); 75 testStates("aria_option1", 0, 0, STATE_SELECTED); 76 testStates("aria_option2", STATE_SELECTED); 77 testStates("aria_option3", 0, 0, STATE_SELECTED); 78 testStates("aria_treeitem1", 0, 0, STATE_SELECTED); 79 testStates("aria_treeitem2", STATE_SELECTED); 80 testStates("aria_treeitem3", 0, 0, STATE_SELECTED); 81 82 // Test the selected state when a widget item is DOM focused if 83 // aria-selected is explicitly set on at least one of the items. 84 gQueue = new eventQueue(EVENT_FOCUS); 85 86 gQueue.push(new focusARIAItem("aria_tab1", false)); 87 gQueue.push(new focusARIAItem("aria_tab2", true)); 88 gQueue.push(new focusARIAItem("aria_tab3", false)); 89 gQueue.push(new focusARIAItem("aria_option1", false)); 90 gQueue.push(new focusARIAItem("aria_option2", true)); 91 gQueue.push(new focusARIAItem("aria_option3", false)); 92 gQueue.push(new focusARIAItem("aria_treeitem1", false)); 93 gQueue.push(new focusARIAItem("aria_treeitem2", true)); 94 gQueue.push(new focusARIAItem("aria_treeitem3", false)); 95 96 // Test the selected state when a widget item is focused via 97 // aria-activedescendant if aria-selected is explicitly set on at least 98 // one of the items. 99 gQueue.push(new focusActiveDescendantItem("aria_tab5", "aria_tablist2", false)); 100 gQueue.push(new focusActiveDescendantItem("aria_tab6", "aria_tablist2", false)); 101 gQueue.push(new focusActiveDescendantItem("aria_tab4", "aria_tablist2", false)); 102 103 gQueue.invoke(); // SimpleTest.finish() will be called in the end 104 } 105 106 SimpleTest.waitForExplicitFinish(); 107 addA11yLoadEvent(doTest); 108 </script> 109 </head> 110 <body> 111 112 <a target="_blank" 113 href="https://bugzilla.mozilla.org/show_bug.cgi?id=653601" 114 title="aria-selected ignored for ARIA tabs"> 115 Mozilla Bug 653601 116 </a> 117 <a target="_blank" 118 href="https://bugzilla.mozilla.org/show_bug.cgi?id=526703" 119 title="Focused widget item should expose selected state by default"> 120 Mozilla Bug 526703 121 </a> 122 <p id="display"></p> 123 <div id="content" style="display: none"></div> 124 <pre id="test"> 125 </pre> 126 127 <!-- tab --> 128 <div id="aria_tablist" role="tablist"> 129 <div id="aria_tab1" role="tab" tabindex="0">unselected tab</div> 130 <div id="aria_tab2" role="tab" tabindex="0" aria-selected="true">selected tab</div> 131 <div id="aria_tab3" role="tab" tabindex="0" aria-selected="false">focused explicitly unselected tab</div> 132 </div> 133 134 <!-- listbox --> 135 <div id="aria_listbox" role="listbox"> 136 <div id="aria_option1" role="option" tabindex="0">unselected option</div> 137 <div id="aria_option2" role="option" tabindex="0" aria-selected="true">selected option</div> 138 <div id="aria_option3" role="option" tabindex="0" aria-selected="false">focused explicitly unselected option</div> 139 </div> 140 141 <!-- tree --> 142 <div id="aria_tree" role="tree"> 143 <div id="aria_treeitem1" role="treeitem" tabindex="0">unselected treeitem</div> 144 <div id="aria_treeitem2" role="treeitem" tabindex="0" aria-selected="true">selected treeitem</div> 145 <div id="aria_treeitem3" role="treeitem" tabindex="0" aria-selected="false">focused explicitly unselected treeitem</div> 146 </div> 147 148 <!-- tab managed by active-descendant --> 149 <div id="aria_tablist2" role="tablist" tabindex="0"> 150 <div id="aria_tab4" role="tab" aria-selected="false">focused explicitly unselected tab</div> 151 <div id="aria_tab5" role="tab">initially selected tab</div> 152 <div id="aria_tab6" role="tab">later selected tab</div> 153 </div> 154 </body> 155 </html>