| <!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="aria-atomic" aria-live="polite" aria-atomic="true">POD</div> |
| <div id="alert-atomic" role="alert">Achtung!</div> |
| |
| <script> |
| |
| test(function(t) { |
| assert_true(internals.runtimeFlags.accessibilityObjectModelEnabled); |
| }, "Make sure that Accessibility Object Model is enabled"); |
| |
| promise_test(async function(t) { |
| // atomic attribute is implicitly set for role=alert. |
| var divElement = document.getElementById("aria-atomic"); |
| var alertElement = document.getElementById("alert-atomic"); |
| var divCaxNode = await window.getComputedAccessibleNode(divElement); |
| var alertCaxNode = await window.getComputedAccessibleNode(alertElement); |
| assert_equals(divCaxNode.atomic, true); |
| assert_equals(alertCaxNode.atomic, true); |
| }, "ComputedAccessibleNode.atomic."); |
| |
| </script> |
| |
| <button id="disabled-native" disabled>Can't click me.</button> |
| <div id="aria-disabled" aria-disabled="true">Nor me.</div> |
| |
| <script> |
| |
| promise_test(async function(t) { |
| var buttonElement = document.getElementById("disabled-native"); |
| var divElement = document.getElementById("aria-disabled"); |
| var buttonCaxNode = await window.getComputedAccessibleNode(buttonElement); |
| var divCaxNode = await window.getComputedAccessibleNode(divElement); |
| assert_equals(buttonCaxNode.disabled, true); |
| assert_equals(divCaxNode.disabled, true); |
| }, "ComputedAccessibleNode.disabled"); |
| |
| </script> |
| |
| <form action="/action_page.php"> |
| <input id="native-readonly" type="text" name="country" value="Norway" readonly><br> |
| <div id="aria-readonly" role="checkbox" aria-checked="true" aria-readonly="true"></div> |
| <input id="submit" type="submit" value="Submit"> |
| </form> |
| |
| <script> |
| |
| promise_test(async function(t) { |
| var readOnlyElement = document.getElementById("native-readonly"); |
| var ariaReadOnlyElement = document.getElementById("aria-readonly"); |
| var submitElement = document.getElementById("submit"); |
| var readOnlyCaxNode = await window.getComputedAccessibleNode(readOnlyElement); |
| var ariaReadOnlyCaxNode = await window.getComputedAccessibleNode(ariaReadOnlyElement); |
| var submitCaxNode = await window.getComputedAccessibleNode(submitElement); |
| |
| assert_equals(readOnlyCaxNode.readOnly, true); |
| assert_equals(ariaReadOnlyCaxNode.readOnly, true); |
| assert_equals(submitCaxNode.readOnly, false); |
| }, "ComputedAccessibleNode.readOnly"); |
| |
| </script> |
| |
| <form> |
| <input id="native-required" type="text" required><br> |
| <div id="aria-required" type="text" aria-required="true"></div> |
| <div id="optional" type="text" aria-required="false"></div> |
| </form> |
| |
| <script> |
| |
| promise_test(async function(t) { |
| var nativeRequired = document.getElementById("native-required"); |
| var ariaRequired = document.getElementById("aria-required"); |
| var optional = document.getElementById("optional"); |
| var nativeCaxNode = await window.getComputedAccessibleNode(nativeRequired); |
| var ariaCaxNode = await window.getComputedAccessibleNode(ariaRequired); |
| var optionalCaxNode = await window.getComputedAccessibleNode(optional); |
| |
| assert_equals(nativeCaxNode.required, true); |
| assert_equals(ariaCaxNode.required, true); |
| assert_equals(optionalCaxNode.required, false); |
| }, "ComputedAccessibleNode.required"); |
| |
| </script> |
