aom.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>

<button id="button1">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button1");
    assert_equals(button.nodeType, Node.ELEMENT_NODE);
    assert_true(Boolean(button.accessibleNode));
}, "DOM Elements have an AccessibleNode");
</script>

<button id="button2">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button2");
    var staticText = button.firstChild;
    assert_equals(staticText.nodeType, Node.TEXT_NODE);
    assert_false(Boolean(staticText.accessibleNode));
}, "DOM Text nodes do not have an AccessibleNode.");
</script>

<button id="button3">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button2");
    var aomButton = button.accessibleNode;

    assert_equals(aomButton.role, null);
    assert_equals(aomButton.label, null);
    assert_equals(aomButton.foo, undefined);
    assert_equals(aomButton.bar, undefined);
}, "Supported properties on an AccessibleNode are all null by default");
</script>

<button id="button4">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button4");
    var aomButton = button.accessibleNode;
    var axButton = accessibilityController.accessibleElementById("button4");

    button.setAttribute("role", "checkbox");
    button.setAttribute("aria-label", "Check Me");

    axButton = accessibilityController.accessibleElementById("button4");
    assert_equals(axButton.name, "Check Me");
    assert_equals(axButton.role, "AXRole: AXCheckBox");

    assert_equals(aomButton.role, null);
    assert_equals(aomButton.label, null);
}, "ARIA attributes are not reflected into AOM properties");
</script>

<button id="button5">Click Me</button>

<script>
// String properties set via AOM are no longer reflected in the accessibility tree.
test(function(t) {
    var button = document.getElementById("button5");
    var aomButton = button.accessibleNode;
    var axButton = accessibilityController.accessibleElementById("buttont");

    aomButton.role = "slider";
    assert_equals(aomButton.role, "slider");

    axButton = accessibilityController.accessibleElementById("button5");
    assert_equals(axButton.role, "AXRole: AXButton");
}, "Test setting AccessibleNode.role");
</script>

<button id="button6">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button6");
    var aomButton = button.accessibleNode;
    console.log('aomButton: ' + aomButton);
    var axButton = accessibilityController.accessibleElementById("button6");

    button.removeAttribute("role");
    aomButton.role = null;

    axButton = accessibilityController.accessibleElementById("button6");
    assert_equals(aomButton.role, null);
    assert_equals(axButton.role, "AXRole: AXButton");

    aomButton.role = "doctor";

    axButton = accessibilityController.accessibleElementById("button6");
    assert_equals(aomButton.role, "doctor");
    assert_equals(axButton.role, "AXRole: AXButton");
}, "An invalid role should be ignored if there's no ARIA.");
</script>

<button id="button7">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button7");
    var aomButton = button.accessibleNode;
    var axButton = accessibilityController.accessibleElementById("button7");

    aomButton.role = "switch checkbox";

    axButton = accessibilityController.accessibleElementById("button7");

    assert_equals(aomButton.role, "switch checkbox");
    assert_equals(axButton.role, "AXRole: AXButton");

    aomButton.role = "tickbox checkbox";

    axButton = accessibilityController.accessibleElementById("button7");
    assert_equals(aomButton.role, "tickbox checkbox");
    assert_equals(axButton.role, "AXRole: AXButton");
}, "Fallback roles are supported.");
</script>

<button id="button8">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button8");
    var aomButton = button.accessibleNode;
    var axButton = accessibilityController.accessibleElementById("button8");

    button.removeAttribute("aria-label");
    aomButton.label = "New Label";

    assert_equals(aomButton.label, "New Label");
    assert_equals(axButton.name, "Click Me");
}, "Test setting AccessibleNode.label");

</script>

<button id="button9">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button9");
    var aomButton = button.accessibleNode;
    var axButton = accessibilityController.accessibleElementById("button9");

    button.setAttribute("role", "textbox");
    button.setAttribute("aria-label", "ARIA");

    aomButton.role = "radio";
    aomButton.label = "AOM";

    axButton = accessibilityController.accessibleElementById("button9");
    assert_equals(axButton.name, "ARIA");
}, "Test that AOM properties do not override ARIA attributes");
</script>

<button id="button10">Click Me</button>

<script>
test(function(t) {
    var button = document.getElementById("button10");
    var aomButton = button.accessibleNode;
    var axButton = accessibilityController.accessibleElementById("button10");
    assert_equals(axButton.role, "AXRole: AXButton");
    assert_equals(axButton.name, "Click Me");

    button.setAttribute("role", "textbox");
    button.setAttribute("aria-label", "ARIA");

    aomButton.role = "radio";
    aomButton.label = "AOM";

    axButton = accessibilityController.accessibleElementById("button10");
    assert_equals(axButton.role, "AXRole: AXTextField");
    assert_equals(axButton.name, "ARIA");

    aomButton.role = null;
    aomButton.label = null;

    axButton = accessibilityController.accessibleElementById("button10");
    assert_equals(axButton.role, "AXRole: AXTextField");
    assert_equals(axButton.name, "ARIA");
}, "Clearing an AOM property falls back on an ARIA attribute");
</script>

<button id="button11">Click Me</button>

<script>
test(function(t) {
    var aomButton;
    (function() {
        var button = document.getElementById("button11");
        aomButton = button.accessibleNode;
        aomButton.role = "checkbox";
        aomButton.label = "Check Me";
    })();

    assert_equals(aomButton.role, "checkbox");
    assert_equals(aomButton.label, "Check Me");

    (function() {
        var button = document.getElementById("button11");
        button.parentElement.removeChild(button);
    })();
    gc();

    assert_equals(aomButton.role, "checkbox");
    assert_equals(aomButton.label, "Check Me");
}, "An AccessibleNode keeps its element alive.");

</script>
chromium/third_party/blink/web_tests/accessibility/aom.html
