| <!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/ |
| |
| --> |
| |
| <div id="button1" role="button">Click</div> |
| |
| <script> |
| |
| test(function(t) { |
| assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled); |
| }, "Make sure that Accessibility Object Model is enabled"); |
| |
| promise_test(async function(test) { |
| var element = document.getElementById("button1"); |
| var computedAXNode = await window.getComputedAccessibleNode(element); |
| assert_equals(computedAXNode.role, "button"); |
| }, "ComputedAccessibleNode.role"); |
| |
| promise_test(async function(test) { |
| var element = document.getElementById("button1"); |
| var computedAXNode = await window.getComputedAccessibleNode(element); |
| assert_equals(computedAXNode.name, "Click"); |
| }, "ComputedAccessibleNode.name"); |
| |
| </script> |
| |
| <div id="button2" role="button" aria-label="axButton">Click</div> |
| |
| <script> |
| |
| promise_test(async function(test) { |
| var element = document.getElementById("button2"); |
| var computedAXNode = await window.getComputedAccessibleNode(element); |
| assert_equals(computedAXNode.name, "axButton"); |
| }, "ComputedAccessibleNode.name set through ARIA."); |
| |
| </script> |
| |
| <div id="shortcut" aria-keyshortcuts="Alt+Shift+P">Use my shortcut!</div> |
| |
| <script> |
| |
| promise_test(async function(test) { |
| var element = document.getElementById("shortcut"); |
| var computedAXNode = await window.getComputedAccessibleNode(element); |
| assert_equals(computedAXNode.keyShortcuts, "Alt+Shift+P"); |
| }, "ComputedAccessibleNode.keyShortcuts."); |
| |
| </script> |
| |
| <p><label>Name:<input id="fullname" type="text" name="fullname" placeholder="Jordan Doe"></label></p> |
| |
| <script> |
| |
| promise_test(async function(test) { |
| var element = document.getElementById("fullname"); |
| computedAXNode = await window.getComputedAccessibleNode(element); |
| assert_equals(computedAXNode.placeholder, "Jordan Doe"); |
| }, "ComputedAccessibleNode.placeHolder."); |
| |
| </script> |
| |
| <div id="button3" role="button" aria-roledescription="submit button">Click</div> |
| |
| <script> |
| |
| promise_test(async function(test) { |
| var element = document.getElementById("button3"); |
| computedAXNode = await window.getComputedAccessibleNode(element); |
| assert_equals(computedAXNode.role, "button"); |
| assert_equals(computedAXNode.roleDescription, "submit button"); |
| }, "ComputedAccessibleNode.roleDescription."); |
| |
| </script> |
| |
| <input id="both-autocomplete" role="combobox" aria-autocomplete="both"></input> |
| <input id="no-autocomplete" role="combobox" aria-autocomplete="none"></input> |
| <script> |
| |
| promise_test(async function(test) { |
| var bothElement = document.getElementById("both-autocomplete"); |
| var noneElement = document.getElementById("no-autocomplete"); |
| var bothCAXNode = await window.getComputedAccessibleNode(bothElement); |
| var noneCAXNode = await window.getComputedAccessibleNode(noneElement); |
| assert_equals(bothCAXNode.autocomplete, "both"); |
| assert_equals(noneCAXNode.autocomplete, null); |
| test.done(); |
| }, "ComputedAccessibleNode.autocomplete"); |
| |
| </script> |
| |
| <div role="checkbox" id="group-checkbox" aria-checked="mixed" aria-controls="cond1 cond2" tabindex="0"> |
| All condiments |
| </div> |
| <ul id="checkboxes"> |
| <li> |
| <label> |
| <input type="checkbox" id="cond1"> Lettuce |
| </label> |
| </li> |
| <li> |
| <label> |
| <input type="checkbox" id="cond2" checked=""> Tomato |
| </label> |
| </li> |
| </ul> |
| |
| <script> |
| |
| promise_test(async function(test) { |
| var groupElement = document.getElementById("group-checkbox"); |
| var cond1Element = document.getElementById("cond1"); |
| var cond2Element = document.getElementById("cond2"); |
| |
| var groupCaxNode = await window.getComputedAccessibleNode(groupElement); |
| var cond1CaxNode = await window.getComputedAccessibleNode(cond1Element); |
| var cond2CaxNode = await window.getComputedAccessibleNode(cond2Element); |
| assert_equals(groupCaxNode.checked, "mixed"); |
| assert_equals(cond1CaxNode.checked, "false"); |
| assert_equals(cond2CaxNode.checked, "true"); |
| }, "ComputedAccessibleNode.checked."); |
| </script> |
