| <!DOCTYPE HTML> |
| <script src="../resources/gc.js"></script> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="../resources/run-after-layout-and-paint.js"></script> |
| |
| <!-- |
| |
| Accessibility Object Model |
| Explainer: https://github.com/WICG/aom/blob/gh-pages/explainer.md |
| Spec: https://wicg.github.io/aom/spec/ |
| |
| --> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled); |
| }, "Make sure that Accessibility Object Model is enabled"); |
| </script> |
| |
| <div role="listbox" id="listbox" tabindex=0> |
| <div role="option" id="option1">Option 1</div> |
| <div role="option" id="option2">Option 2</div> |
| <div role="option" id="option3">Option 3</div> |
| </div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var listbox = document.getElementById("listbox"); |
| var option1 = document.getElementById("option1"); |
| listbox.focus(); |
| var axListbox = accessibilityController.accessibleElementById("listbox"); |
| var axOption1 = accessibilityController.accessibleElementById("option1"); |
| assert_false(axOption1.isSelected); |
| assert_equals(axListbox.ariaActiveDescendantElement(), undefined); |
| |
| listbox.accessibleNode.activeDescendant = option1.accessibleNode; |
| |
| assert_true(axListbox.ariaActiveDescendantElement().isEqual(axOption1)); |
| // Active Descendant also makes the option selected. |
| assert_true(axOption1.isSelected); |
| }, "AccessibleNode.activeDescendant"); |
| </script> |
| |
| <input id="input1"> |
| <div id="details">Details</div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var input1 = document.getElementById("input1"); |
| var details = document.getElementById("details"); |
| var axInput1 = accessibilityController.accessibleElementById("input1"); |
| var axDetails = accessibilityController.accessibleElementById("details"); |
| assert_equals(axInput1.ariaDetailsElement(), undefined); |
| |
| input1.accessibleNode.details = details.accessibleNode; |
| |
| assert_true(axInput1.ariaDetailsElement().isEqual(axDetails)); |
| }, "AccessibleNode.details"); |
| </script> |
| |
| <input id="input2"> |
| <div id="errorMessage">ErrorMessage</div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var input2 = document.getElementById("input2"); |
| var errorMessage = document.getElementById("errorMessage"); |
| var axInput2 = accessibilityController.accessibleElementById("input2"); |
| var axErrorMessage = accessibilityController.accessibleElementById("errorMessage"); |
| assert_equals(axInput2.ariaErrorMessageElement(), undefined); |
| |
| input2.accessibleNode.errorMessage = errorMessage.accessibleNode; |
| |
| assert_true(axInput2.ariaErrorMessageElement().isEqual(axErrorMessage)); |
| }, "AccessibleNode.errorMessage"); |
| </script> |
