| <!DOCTYPE HTML> |
| <script src="../resources/gc.js"></script> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <!-- |
| |
| Accessibility Object Model |
| Explainer: https://github.com/WICG/aom/blob/master/explainer.md |
| Spec: https://wicg.github.io/aom/spec/ |
| |
| --> |
| |
| <script> |
| test(function(t) { |
| assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled); |
| }, "Make sure that Accessibility Object Model is enabled"); |
| </script> |
| |
| <input id="input" aria-labeledby="l1 l2"> |
| <input id="input2" aria-labelledby="l1 l3"> |
| <label id="l1">L1</label> |
| <label id="l2">L2</label> |
| <label id="l3">L3</label> |
| <label id="l4">L4</label> |
| |
| <script> |
| test(function(t) { |
| var input = document.getElementById("input"); |
| var axInput = accessibilityController.accessibleElementById("input"); |
| assert_equals(axInput.name, "L1 L2"); |
| |
| var input2 = document.getElementById("input2"); |
| var axInput2 = accessibilityController.accessibleElementById("input2"); |
| assert_equals(axInput2.name, "L1 L3"); |
| |
| var l3 = document.getElementById("l3"); |
| var l4 = document.getElementById("l4"); |
| |
| input.accessibleNode.labeledBy = new AccessibleNodeList(); |
| input.accessibleNode.labeledBy.add(l3.accessibleNode); |
| |
| input2.accessibleNode.labeledBy = new AccessibleNodeList(); |
| input2.accessibleNode.labeledBy.add(l3.accessibleNode); |
| input2.accessibleNode.labeledBy.add(l4.accessibleNode); |
| |
| assert_equals(input2.accessibleNode.labeledBy.length, 2); |
| assert_equals(input2.accessibleNode.labeledBy[0], l3.accessibleNode); |
| assert_equals(input2.accessibleNode.labeledBy[1], l4.accessibleNode); |
| assert_equals(input2.accessibleNode.labeledBy[2], undefined); |
| |
| // No change observed in accessibility tree. |
| assert_equals(axInput.name, "L1 L2"); |
| assert_equals(axInput2.name, "L1 L3"); |
| |
| input.accessibleNode.labeledBy = null; |
| assert_equals(axInput.name, "L1 L2"); |
| |
| input2.accessibleNode.labeledBy.remove(l3.accessibleNode); |
| assert_equals(axInput2.name, "L1 L3"); |
| |
| input2.accessibleNode.labeledBy[0] = l2.accessibleNode; |
| assert_equals(axInput2.name, "L1 L3"); |
| input2.accessibleNode.labeledBy[2] = l4.accessibleNode; |
| assert_equals(axInput2.name, "L1 L3"); |
| }, "AccessibleNode.labeledBy"); |
| </script> |
| <input id="input3" aria-describedby="l1 l2"> |
| |
| <script> |
| test(function(t) { |
| var input = document.getElementById("input3"); |
| var axInput = accessibilityController.accessibleElementById("input3"); |
| assert_equals(axInput.description, "L1 L2"); |
| |
| var l3 = document.getElementById("l3"); |
| var l4 = document.getElementById("l4"); |
| |
| input.accessibleNode.describedBy = new AccessibleNodeList(); |
| input.accessibleNode.describedBy.add(l3.accessibleNode); |
| input.accessibleNode.describedBy.add(l4.accessibleNode); |
| |
| assert_equals(input.accessibleNode.describedBy.length, 2); |
| assert_equals(input.accessibleNode.describedBy[0], l3.accessibleNode); |
| assert_equals(input.accessibleNode.describedBy[1], l4.accessibleNode); |
| assert_equals(input.accessibleNode.describedBy[2], undefined); |
| |
| assert_equals(axInput.description, "L1 L2"); |
| |
| input.accessibleNode.describedBy.remove(l3.accessibleNode); |
| assert_equals(axInput.description, "L1 L2"); |
| |
| input.accessibleNode.describedBy[0] = l2.accessibleNode; |
| assert_equals(axInput.description, "L1 L2"); |
| input.accessibleNode.describedBy[2] = l4.accessibleNode; |
| assert_equals(axInput.description, "L1 L2"); |
| |
| input.accessibleNode.describedBy = null; |
| assert_equals(axInput.description, "L1 L2"); |
| }, "AccessibleNode.describedBy"); |
| </script> |
| |
| <ul id="tablist_1" role="tablist"> |
| <li id="tab_1" role="tab" aria-controls="panel_1 panel_2"></li> |
| </ul> |
| |
| <div id="panel_1" role="tabpanel">Panel 1</div> |
| <div id="panel_2" role="tabpanel">Panel 2</div> |
| <div id="panel_3" role="tabpanel">Panel 3</div> |
| <div id="panel_4" role="tabpanel">Panel 4</div> |
| |
| <p id="description"></p> |
| <div id="console"></div> |
| |
| <script> |
| test(function(t) { |
| var axTab1 = accessibilityController.accessibleElementById("tablist_1").childAtIndex(0); |
| var axPanel1 = accessibilityController.accessibleElementById("panel_1"); |
| var axPanel2 = accessibilityController.accessibleElementById("panel_2"); |
| var axPanel3 = accessibilityController.accessibleElementById("panel_3"); |
| var axPanel4 = accessibilityController.accessibleElementById("panel_4"); |
| |
| assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1)); |
| assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2)); |
| |
| var tab1 = document.getElementById("tablist_1").firstElementChild; |
| var panel3 = document.getElementById("panel_3"); |
| var panel4 = document.getElementById("panel_4"); |
| tab1.accessibleNode.controls = new AccessibleNodeList(); |
| tab1.accessibleNode.controls[0] = panel3.accessibleNode; |
| |
| assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1)); |
| assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2)); |
| |
| tab1.accessibleNode.controls[1] = panel4.accessibleNode; |
| |
| assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1)); |
| assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2)); |
| |
| tab1.accessibleNode.controls = null; |
| |
| assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1)); |
| assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2)); |
| }, "AccessibleNode.controls"); |
| </script> |
| |
| <h1 id="item1" aria-flowto="item2 item3"></h1> |
| |
| <div id="item2">Content 2</div> |
| <div id="item3">Content 3</div> |
| <div id="item4">Content 4</div> |
| |
| <p id="description"></p> |
| <div id="console"></div> |
| |
| <script> |
| test(function(t) { |
| var axItem1 = accessibilityController.accessibleElementById("item1"); |
| var axItem2 = accessibilityController.accessibleElementById("item2"); |
| var axItem3 = accessibilityController.accessibleElementById("item3"); |
| var axItem4 = accessibilityController.accessibleElementById("item4"); |
| |
| assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2)); |
| assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3)); |
| |
| var item1 = document.getElementById("item1"); |
| var item2 = document.getElementById("item2"); |
| var item3 = document.getElementById("item3"); |
| var item4 = document.getElementById("item4"); |
| |
| item1.accessibleNode.flowTo = new AccessibleNodeList(); |
| item1.accessibleNode.flowTo.add(item4.accessibleNode); |
| |
| assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2)); |
| assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3)); |
| |
| item1.accessibleNode.flowTo.add(item2.accessibleNode); |
| |
| assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3)); |
| |
| item1.accessibleNode.flowTo = null; |
| |
| assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2)); |
| assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3)); |
| }, "AccessibleNode.flowTo"); |
| </script> |
| |
| <h1 id="elem1" aria-details="elem2 elem3"></h1> |
| |
| <div id="elem2">Content 2</div> |
| <div id="elem3">Content 3</div> |
| <div id="elem4">Content 4</div> |
| |
| <p id="description"></p> |
| <div id="console"></div> |
| |
| <script> |
| test(function(t) { |
| var axElem1 = accessibilityController.accessibleElementById("elem1"); |
| var axElem2 = accessibilityController.accessibleElementById("elem2"); |
| var axElem3 = accessibilityController.accessibleElementById("elem3"); |
| var axElem4 = accessibilityController.accessibleElementById("elem4"); |
| |
| assert_true(axElem1.ariaDetailsElementAtIndex(0).isEqual(axElem2)); |
| assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3)); |
| |
| var elem1 = document.getElementById("elem1"); |
| var elem2 = document.getElementById("elem2"); |
| var elem3 = document.getElementById("elem3"); |
| var elem4 = document.getElementById("elem4"); |
| |
| elem1.accessibleNode.details = new AccessibleNodeList(); |
| elem1.accessibleNode.details.add(elem4.accessibleNode); |
| |
| assert_true(axElem1.ariaDetailsElementAtIndex(0).isEqual(axElem2)); |
| assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3)); |
| |
| elem1.accessibleNode.details.add(elem2.accessibleNode); |
| |
| assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3)); |
| |
| elem1.accessibleNode.details = null; |
| |
| assert_true(axElem1.ariaDetailsElementAtIndex(0).isEqual(axElem2)); |
| assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3)); |
| }, "AccessibleNode.details"); |
| </script> |
| |
| <div class="container"> |
| <ul id="list1" role="listbox" aria-owns="listitem3"> |
| <li role="option">One</li> |
| <li role="option">Two</li> |
| </ul> |
| <ul role="listbox" id="list2"> |
| <li role="option" id="listitem3">Three</li> |
| <li role="option" id="listitem4">Four</li> |
| </ul> |
| </div> |
| |
| <script> |
| test(function(t) |
| { |
| var axList1 = accessibilityController.accessibleElementById("list1"); |
| assert_equals(axList1.role, "AXRole: AXListBox"); |
| assert_equals(axList1.childrenCount, 3); |
| |
| assert_equals(axList1.childAtIndex(0).name, "One"); |
| assert_equals(axList1.childAtIndex(1).name, "Two"); |
| assert_equals(axList1.childAtIndex(2).name, "Three"); |
| |
| var axList2 = accessibilityController.accessibleElementById("list2"); |
| assert_equals(axList2.role, "AXRole: AXListBox"); |
| assert_equals(axList2.childrenCount, 1); |
| assert_equals(axList2.childAtIndex(0).name, "Four"); |
| |
| var list1 = document.getElementById("list1"); |
| |
| list1.accessibleNode.owns = new AccessibleNodeList(); |
| assert_equals(axList1.childrenCount, 3); |
| }, "AccessibleNode.owns"); |
| </script> |
| |
| <script> |
| if (window.testRunner) |
| document.body.className = "hideAllContainers"; |
| </script> |
