| <!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> |
| |
| <input role="combobox" id="autocomplete"> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("autocomplete"); |
| var axNode = accessibilityController.accessibleElementById("autocomplete"); |
| assert_equals(axNode.autocomplete, ""); |
| node.accessibleNode.autocomplete = "inline"; |
| assert_equals(axNode.autocomplete, "inline"); |
| }, "AccessibleNode.autocomplete"); |
| </script> |
| |
| <div role="checkbox" id="checked"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("checked"); |
| var axNode = accessibilityController.accessibleElementById("checked"); |
| assert_equals(axNode.checked, "false"); |
| node.accessibleNode.checked = "true"; |
| assert_equals(axNode.checked, "true"); |
| node.accessibleNode.checked = "mixed"; |
| assert_equals(axNode.checked, "mixed"); |
| |
| // It also works to set it to just true or false (no quotes). |
| node.accessibleNode.checked = true; |
| assert_equals(axNode.checked, "true"); |
| node.accessibleNode.checked = false; |
| assert_equals(axNode.checked, "false"); |
| }, "AccessibleNode.checked"); |
| </script> |
| |
| <div role="tab" id="current"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("current"); |
| var axNode = accessibilityController.accessibleElementById("current"); |
| assert_equals(axNode.current, ""); |
| node.accessibleNode.current = "page"; |
| assert_equals(axNode.current, "page"); |
| }, "AccessibleNode.current"); |
| </script> |
| |
| <div role="textbox" id="hasPopUp" aria-haspopup="false"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("hasPopUp"); |
| var axNode = accessibilityController.accessibleElementById("hasPopUp"); |
| assert_equals(axNode.hasPopup, ""); |
| node.accessibleNode.hasPopUp = "dialog"; |
| // Refresh the axNode as aria-haspopup changes can invalidate it for |
| // purposes of allowing the role change. |
| axNode = accessibilityController.accessibleElementById("hasPopUp"); |
| assert_equals(axNode.hasPopup, "dialog"); |
| }, "AccessibleNode.hasPopUp"); |
| </script> |
| |
| <div role="textbox" id="invalid"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("invalid"); |
| var axNode = accessibilityController.accessibleElementById("invalid"); |
| assert_equals(axNode.invalid, ""); |
| node.accessibleNode.invalid = "spelling"; |
| assert_equals(axNode.invalid, "spelling"); |
| }, "AccessibleNode.invalid"); |
| </script> |
| |
| <div role="button" id="keyShortcuts"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("keyShortcuts"); |
| var axNode = accessibilityController.accessibleElementById("keyShortcuts"); |
| assert_equals(axNode.keyShortcuts, ""); |
| node.accessibleNode.keyShortcuts = "Ctrl+F"; |
| assert_equals(axNode.keyShortcuts, "Ctrl+F"); |
| }, "AccessibleNode.keyShortcuts"); |
| </script> |
| |
| <div role="heading" id="label">Inner text</div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("label"); |
| var axNode = accessibilityController.accessibleElementById("label"); |
| assert_equals(axNode.name, "Inner text"); |
| node.accessibleNode.label = "Label"; |
| assert_equals(axNode.name, "Label"); |
| }, "AccessibleNode.label"); |
| </script> |
| |
| <div role="banner" id="live"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("live"); |
| var axNode = accessibilityController.accessibleElementById("live"); |
| assert_equals(axNode.live, ""); |
| node.accessibleNode.live = "polite"; |
| assert_equals(axNode.live, "polite"); |
| }, "AccessibleNode.live"); |
| </script> |
| |
| <div role="slider" id="orientation"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("orientation"); |
| var axNode = accessibilityController.accessibleElementById("orientation"); |
| assert_equals(axNode.orientation, "AXOrientation: AXHorizontalOrientation"); |
| node.accessibleNode.orientation = "vertical"; |
| assert_equals(axNode.orientation, "AXOrientation: AXVerticalOrientation"); |
| }, "AccessibleNode.orientation"); |
| </script> |
| |
| <input id="placeholder"> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("placeholder"); |
| var axNode = accessibilityController.accessibleElementById("placeholder"); |
| assert_equals(axNode.name, ""); |
| node.accessibleNode.placeholder = "Placeholder"; |
| assert_equals(axNode.name, "Placeholder"); |
| assert_equals(axNode.nameFrom, "placeholder"); |
| }, "AccessibleNode.placeholder"); |
| </script> |
| |
| <div role="banner" id="relevant"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("relevant"); |
| var axNode = accessibilityController.accessibleElementById("relevant"); |
| assert_equals(axNode.relevant, "additions text"); |
| node.accessibleNode.relevant = "additions"; |
| assert_equals(axNode.relevant, "additions"); |
| }, "AccessibleNode.relevant"); |
| </script> |
| |
| <div role="button" id="role"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("role"); |
| var axNode = accessibilityController.accessibleElementById("role"); |
| assert_equals(axNode.role, "AXRole: AXButton"); |
| node.accessibleNode.role = "combobox"; |
| |
| axNode = accessibilityController.accessibleElementById("role"); |
| assert_equals(axNode.role, "AXRole: AXComboBoxGrouping"); |
| node.accessibleNode.role = "banana button"; |
| |
| axNode = accessibilityController.accessibleElementById("role"); |
| assert_equals(axNode.role, "AXRole: AXButton"); |
| }, "AccessibleNode.role"); |
| </script> |
| |
| <div role="button" id="roleDescription"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("roleDescription"); |
| var axNode = accessibilityController.accessibleElementById("roleDescription"); |
| assert_equals(axNode.roleDescription, ""); |
| node.accessibleNode.roleDescription = "Push Button"; |
| assert_equals(axNode.roleDescription, "Push Button"); |
| }, "AccessibleNode.roleDescription"); |
| </script> |
| |
| <div role="columnheader" id="sort"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("sort"); |
| var axNode = accessibilityController.accessibleElementById("sort"); |
| assert_equals(axNode.sort, ""); |
| node.accessibleNode.sort = "ascending"; |
| assert_equals(axNode.sort, "ascending"); |
| }, "AccessibleNode.sort"); |
| </script> |
| |
| <div role="slider" id="valueText" aria-valuetext="5"></div> |
| |
| <script> |
| test_after_layout_and_paint(function(t) { |
| var node = document.getElementById("valueText"); |
| var axNode = accessibilityController.accessibleElementById("valueText"); |
| assert_equals(axNode.valueDescription, "AXValueDescription: 5"); |
| node.accessibleNode.valueText = "Five"; |
| assert_equals(axNode.valueDescription, "AXValueDescription: Five"); |
| }, "AccessibleNode.valueText"); |
| </script> |