| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src="../resources/gc.js"></script> |
| 3 <script src="../resources/testharness.js"></script> |
| 4 <script src="../resources/testharnessreport.js"></script> |
| 5 |
| 6 <!-- |
| 7 |
| 8 Accessibility Object Model |
| 9 Explainer: https://github.com/WICG/aom/blob/master/explainer.md |
| 10 Spec: https://wicg.github.io/aom/spec/ |
| 11 |
| 12 --> |
| 13 |
| 14 <script> |
| 15 test(function(t) { |
| 16 assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled); |
| 17 }, "Make sure that Accessibility Object Model is enabled"); |
| 18 </script> |
| 19 |
| 20 <input id="input" aria-labeledby="l1 l2"> |
| 21 <input id="input2" aria-labelledby="l1 l3"> |
| 22 <label id="l1">L1</label> |
| 23 <label id="l2">L2</label> |
| 24 <label id="l3">L3</label> |
| 25 <label id="l4">L4</label> |
| 26 |
| 27 <script> |
| 28 test(function(t) { |
| 29 var input = document.getElementById("input"); |
| 30 var axInput = accessibilityController.accessibleElementById("input"); |
| 31 assert_equals(axInput.name, "L1 L2"); |
| 32 |
| 33 var input2 = document.getElementById("input2"); |
| 34 var axInput2 = accessibilityController.accessibleElementById("input2"); |
| 35 assert_equals(axInput2.name, "L1 L3"); |
| 36 |
| 37 var l3 = document.getElementById("l3"); |
| 38 var l4 = document.getElementById("l4"); |
| 39 |
| 40 input.accessibleNode.labeledBy = new AccessibleNodeList(); |
| 41 input.accessibleNode.labeledBy.add(l3.accessibleNode); |
| 42 |
| 43 input2.accessibleNode.labeledBy = new AccessibleNodeList(); |
| 44 input2.accessibleNode.labeledBy.add(l3.accessibleNode); |
| 45 input2.accessibleNode.labeledBy.add(l4.accessibleNode); |
| 46 |
| 47 assert_equals(input2.accessibleNode.labeledBy.length, 2); |
| 48 assert_equals(input2.accessibleNode.labeledBy[0], l3.accessibleNode); |
| 49 assert_equals(input2.accessibleNode.labeledBy[1], l4.accessibleNode); |
| 50 assert_equals(input2.accessibleNode.labeledBy[2], undefined); |
| 51 |
| 52 assert_equals(axInput.name, "L3"); |
| 53 assert_equals(axInput2.name, "L3 L4"); |
| 54 |
| 55 input.accessibleNode.labeledBy = null; |
| 56 assert_equals(axInput.name, "L1 L2"); |
| 57 |
| 58 input2.accessibleNode.labeledBy.remove(l3.accessibleNode); |
| 59 assert_equals(axInput2.name, "L4"); |
| 60 |
| 61 input2.accessibleNode.labeledBy[0] = l2.accessibleNode; |
| 62 assert_equals(axInput2.name, "L2"); |
| 63 input2.accessibleNode.labeledBy[2] = l4.accessibleNode; |
| 64 assert_equals(axInput2.name, "L2 L4"); |
| 65 }, "AccessibleNode.labeledBy"); |
| 66 </script> |
| 67 |
| 68 <input id="input3" aria-describedby="l1 l2"> |
| 69 |
| 70 <script> |
| 71 test(function(t) { |
| 72 var input = document.getElementById("input3"); |
| 73 var axInput = accessibilityController.accessibleElementById("input3"); |
| 74 assert_equals(axInput.description, "L1 L2"); |
| 75 |
| 76 var l3 = document.getElementById("l3"); |
| 77 var l4 = document.getElementById("l4"); |
| 78 |
| 79 input.accessibleNode.describedBy = new AccessibleNodeList(); |
| 80 input.accessibleNode.describedBy.add(l3.accessibleNode); |
| 81 |
| 82 input.accessibleNode.describedBy = new AccessibleNodeList(); |
| 83 input.accessibleNode.describedBy.add(l3.accessibleNode); |
| 84 input.accessibleNode.describedBy.add(l4.accessibleNode); |
| 85 |
| 86 assert_equals(input.accessibleNode.describedBy.length, 2); |
| 87 assert_equals(input.accessibleNode.describedBy[0], l3.accessibleNode); |
| 88 assert_equals(input.accessibleNode.describedBy[1], l4.accessibleNode); |
| 89 assert_equals(input.accessibleNode.describedBy[2], undefined); |
| 90 |
| 91 assert_equals(axInput.description, "L3 L4"); |
| 92 |
| 93 input.accessibleNode.describedBy.remove(l3.accessibleNode); |
| 94 assert_equals(axInput.description, "L4"); |
| 95 |
| 96 input.accessibleNode.describedBy[0] = l2.accessibleNode; |
| 97 assert_equals(axInput.description, "L2"); |
| 98 input.accessibleNode.describedBy[2] = l4.accessibleNode; |
| 99 assert_equals(axInput.description, "L2 L4"); |
| 100 |
| 101 input.accessibleNode.describedBy = null; |
| 102 assert_equals(axInput.description, "L1 L2"); |
| 103 }, "AccessibleNode.describedBy"); |
| 104 </script> |
| 105 |
| 106 <ul id="tablist_1" role="tablist"> |
| 107 <li id="tab_1" role="tab" aria-controls="panel_1 panel_2"></li> |
| 108 </ul> |
| 109 |
| 110 <div id="panel_1" role="tabpanel">Panel 1</div> |
| 111 <div id="panel_2" role="tabpanel">Panel 2</div> |
| 112 <div id="panel_3" role="tabpanel">Panel 3</div> |
| 113 <div id="panel_4" role="tabpanel">Panel 4</div> |
| 114 |
| 115 <p id="description"></p> |
| 116 <div id="console"></div> |
| 117 |
| 118 <script> |
| 119 test(function(t) { |
| 120 var axTab1 = accessibilityController.accessibleElementById("tablist_1").chil
dAtIndex(0); |
| 121 var axPanel1 = accessibilityController.accessibleElementById("panel_1"); |
| 122 var axPanel2 = accessibilityController.accessibleElementById("panel_2"); |
| 123 var axPanel3 = accessibilityController.accessibleElementById("panel_3"); |
| 124 var axPanel4 = accessibilityController.accessibleElementById("panel_4"); |
| 125 |
| 126 assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1)); |
| 127 assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2)); |
| 128 |
| 129 var tab1 = document.getElementById("tablist_1").firstElementChild; |
| 130 var panel3 = document.getElementById("panel_3"); |
| 131 var panel4 = document.getElementById("panel_4"); |
| 132 tab1.accessibleNode.controls = new AccessibleNodeList(); |
| 133 tab1.accessibleNode.controls[0] = panel3.accessibleNode; |
| 134 |
| 135 assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel3)); |
| 136 assert_equals(axTab1.ariaControlsElementAtIndex(1), undefined); |
| 137 |
| 138 tab1.accessibleNode.controls[1] = panel4.accessibleNode; |
| 139 |
| 140 assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel3)); |
| 141 assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel4)); |
| 142 |
| 143 tab1.accessibleNode.controls = null; |
| 144 |
| 145 assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1)); |
| 146 assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2)); |
| 147 }, "AccessibleNode.controls"); |
| 148 </script> |
| 149 |
| 150 <h1 id="item1" aria-flowto="item2 item3"></h1> |
| 151 |
| 152 <div id="item2">Content 2</div> |
| 153 <div id="item3">Content 3</div> |
| 154 <div id="item4">Content 4</div> |
| 155 |
| 156 <p id="description"></p> |
| 157 <div id="console"></div> |
| 158 |
| 159 <script> |
| 160 test(function(t) { |
| 161 var axItem1 = accessibilityController.accessibleElementById("item1"); |
| 162 var axItem2 = accessibilityController.accessibleElementById("item2"); |
| 163 var axItem3 = accessibilityController.accessibleElementById("item3"); |
| 164 var axItem4 = accessibilityController.accessibleElementById("item4"); |
| 165 |
| 166 assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2)); |
| 167 assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3)); |
| 168 |
| 169 var item1 = document.getElementById("item1"); |
| 170 var item2 = document.getElementById("item2"); |
| 171 var item3 = document.getElementById("item3"); |
| 172 var item4 = document.getElementById("item4"); |
| 173 |
| 174 item1.accessibleNode.flowTo = new AccessibleNodeList(); |
| 175 item1.accessibleNode.flowTo.add(item4.accessibleNode); |
| 176 |
| 177 assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem4)); |
| 178 assert_equals(axItem1.ariaFlowToElementAtIndex(1), undefined); |
| 179 |
| 180 item1.accessibleNode.flowTo.add(item2.accessibleNode); |
| 181 |
| 182 assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem2)); |
| 183 |
| 184 item1.accessibleNode.flowTo = null; |
| 185 |
| 186 assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2)); |
| 187 assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3)); |
| 188 }, "AccessibleNode.flowTo"); |
| 189 </script> |
| 190 |
| 191 <div class="container"> |
| 192 <ul id="list1" role="listbox" aria-owns="listitem3"> |
| 193 <li role="option">One</li> |
| 194 <li role="option">Two</li> |
| 195 </ul> |
| 196 <ul role="listbox" id="list2"> |
| 197 <li role="option" id="listitem3">Three</li> |
| 198 <li role="option" id="listitem4">Four</li> |
| 199 </ul> |
| 200 </div> |
| 201 |
| 202 <script> |
| 203 test(function(t) |
| 204 { |
| 205 var axList1 = accessibilityController.accessibleElementById("list1"); |
| 206 assert_equals(axList1.role, "AXRole: AXListBox"); |
| 207 assert_equals(axList1.childrenCount, 3); |
| 208 |
| 209 var axListitem = axList1.childAtIndex(0); |
| 210 assert_equals(axList1.childAtIndex(0).name, "One"); |
| 211 assert_equals(axList1.childAtIndex(1).name, "Two"); |
| 212 assert_equals(axList1.childAtIndex(2).name, "Three"); |
| 213 |
| 214 var axList2 = accessibilityController.accessibleElementById("list2"); |
| 215 assert_equals(axList2.role, "AXRole: AXListBox"); |
| 216 assert_equals(axList2.childrenCount, 1); |
| 217 assert_equals(axList2.childAtIndex(0).name, "Four"); |
| 218 |
| 219 var list1 = document.getElementById("list1"); |
| 220 var item4 = document.getElementById("item4"); |
| 221 |
| 222 list1.accessibleNode.owns = new AccessibleNodeList(); |
| 223 assert_equals(axList1.childrenCount, 2); |
| 224 /** |
| 225 |
| 226 |
| 227 list1.accessibleNode.owns[0] = item4.accessibleNode; |
| 228 assert_equals(axList1.childrenCount, 3); |
| 229 assert_equals(axList1.childAtIndex(0).name, "One"); |
| 230 assert_equals(axList1.childAtIndex(1).name, "Two"); |
| 231 assert_equals(axList1.childAtIndex(2).name, "Four"); |
| 232 **/ |
| 233 }, "AccessibleNode.owns"); |
| 234 </script> |
| 235 |
| 236 <script> |
| 237 if (window.testRunner) |
| 238 document.body.className = "hideAllContainers"; |
| 239 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2967193003:
Relation list properties for Accessibility Object Model phase 1 (Closed)
