aom-string-properties.html | Explore in Territory

<!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/gh-pages/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 role="combobox" id="autocomplete">

<script>
test(function(t) {
    var node = document.getElementById("autocomplete");
    var axNode = accessibilityController.accessibleElementById("autocomplete");
    assert_equals(axNode.autocomplete, "");
    node.accessibleNode.autocomplete = "inline";
    assert_equals(axNode.autocomplete, "");
}, "AccessibleNode.autocomplete");
</script>

<div role="checkbox" id="checked"></div>

<script>
test(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, "false");
    node.accessibleNode.checked = "mixed";
    assert_equals(axNode.checked, "false");

    // It also works to set it to just true or false (no quotes).
    node.accessibleNode.checked = true;
    assert_equals(axNode.checked, "false");
}, "AccessibleNode.checked");
</script>

<div role="tab" id="current"></div>

<script>
test(function(t) {
    var node = document.getElementById("current");
    var axNode = accessibilityController.accessibleElementById("current");
    assert_equals(axNode.current, "");
    node.accessibleNode.current = "page";
    assert_equals(axNode.current, "");
}, "AccessibleNode.current");
</script>

<div role="textbox" id="hasPopUp" aria-haspopup="false"></div>

<script>
test(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, "");
}, "AccessibleNode.hasPopUp");
</script>

<div role="textbox" id="invalid"></div>

<script>
test(function(t) {
    var node = document.getElementById("invalid");
    var axNode = accessibilityController.accessibleElementById("invalid");
    assert_equals(axNode.invalid, "");
    node.accessibleNode.invalid = "spelling";
    assert_equals(axNode.invalid, "");
}, "AccessibleNode.invalid");
</script>

<div role="button" id="keyShortcuts"></div>

<script>
test(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, "");
}, "AccessibleNode.keyShortcuts");
</script>

<div role="heading" id="label">Inner text</div>

<script>
test(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, "Inner text");
}, "AccessibleNode.label");
</script>

<div role="banner" id="live"></div>

<script>
test(function(t) {
    var node = document.getElementById("live");
    var axNode = accessibilityController.accessibleElementById("live");
    assert_equals(axNode.live, "");
    node.accessibleNode.live = "polite";
    assert_equals(axNode.live, "");
}, "AccessibleNode.live");
</script>

<div role="slider" id="orientation"></div>

<script>
test(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: AXHorizontalOrientation");
}, "AccessibleNode.orientation");
</script>

<input id="placeholder">

<script>
test(function(t) {
    var node = document.getElementById("placeholder");
    var axNode = accessibilityController.accessibleElementById("placeholder");
    assert_equals(axNode.name, "");
    node.accessibleNode.placeholder = "Placeholder";
    assert_equals(axNode.name, "");
    assert_equals(axNode.nameFrom, "");
}, "AccessibleNode.placeholder");
</script>

<div role="banner" id="relevant"></div>

<script>
test(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 text");
}, "AccessibleNode.relevant");
</script>

<div role="button" id="role"></div>

<script>
test(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: AXButton");
    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(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, "");
}, "AccessibleNode.roleDescription");
</script>

<div role="columnheader" id="sort"></div>

<script>
test(function(t) {
    var node = document.getElementById("sort");
    var axNode = accessibilityController.accessibleElementById("sort");
    assert_equals(axNode.sort, "");
    node.accessibleNode.sort = "ascending";
    assert_equals(axNode.sort, "");
}, "AccessibleNode.sort");
</script>

<div role="slider" id="valueText" aria-valuetext="5"></div>

<script>
test(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: 5");
}, "AccessibleNode.valueText");
</script>
chromium/third_party/blink/web_tests/accessibility/aom-string-properties.html
