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