chromium/third_party/blink/web_tests/accessibility/aom-relation-list-properties.html

<!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 id="input" aria-labeledby="l1 l2">
<input id="input2" aria-labelledby="l1 l3">
<label id="l1">L1</label>
<label id="l2">L2</label>
<label id="l3">L3</label>
<label id="l4">L4</label>

<script>
test(function(t) {
    var input = document.getElementById("input");
    var axInput = accessibilityController.accessibleElementById("input");
    assert_equals(axInput.name, "L1 L2");

    var input2 = document.getElementById("input2");
    var axInput2 = accessibilityController.accessibleElementById("input2");
    assert_equals(axInput2.name, "L1 L3");

    var l3 = document.getElementById("l3");
    var l4 = document.getElementById("l4");

    input.accessibleNode.labeledBy = new AccessibleNodeList();
    input.accessibleNode.labeledBy.add(l3.accessibleNode);

    input2.accessibleNode.labeledBy = new AccessibleNodeList();
    input2.accessibleNode.labeledBy.add(l3.accessibleNode);
    input2.accessibleNode.labeledBy.add(l4.accessibleNode);

    assert_equals(input2.accessibleNode.labeledBy.length, 2);
    assert_equals(input2.accessibleNode.labeledBy[0], l3.accessibleNode);
    assert_equals(input2.accessibleNode.labeledBy[1], l4.accessibleNode);
    assert_equals(input2.accessibleNode.labeledBy[2], undefined);

    // No change observed in accessibility tree.
    assert_equals(axInput.name, "L1 L2");
    assert_equals(axInput2.name, "L1 L3");

    input.accessibleNode.labeledBy = null;
    assert_equals(axInput.name, "L1 L2");

    input2.accessibleNode.labeledBy.remove(l3.accessibleNode);
    assert_equals(axInput2.name, "L1 L3");

    input2.accessibleNode.labeledBy[0] = l2.accessibleNode;
    assert_equals(axInput2.name, "L1 L3");
    input2.accessibleNode.labeledBy[2] = l4.accessibleNode;
    assert_equals(axInput2.name, "L1 L3");
}, "AccessibleNode.labeledBy");
</script>
<input id="input3" aria-describedby="l1 l2">

<script>
test(function(t) {
    var input = document.getElementById("input3");
    var axInput = accessibilityController.accessibleElementById("input3");
    assert_equals(axInput.description, "L1 L2");

    var l3 = document.getElementById("l3");
    var l4 = document.getElementById("l4");

    input.accessibleNode.describedBy = new AccessibleNodeList();
    input.accessibleNode.describedBy.add(l3.accessibleNode);
    input.accessibleNode.describedBy.add(l4.accessibleNode);

    assert_equals(input.accessibleNode.describedBy.length, 2);
    assert_equals(input.accessibleNode.describedBy[0], l3.accessibleNode);
    assert_equals(input.accessibleNode.describedBy[1], l4.accessibleNode);
    assert_equals(input.accessibleNode.describedBy[2], undefined);

    assert_equals(axInput.description, "L1 L2");

    input.accessibleNode.describedBy.remove(l3.accessibleNode);
    assert_equals(axInput.description, "L1 L2");

    input.accessibleNode.describedBy[0] = l2.accessibleNode;
    assert_equals(axInput.description, "L1 L2");
    input.accessibleNode.describedBy[2] = l4.accessibleNode;
    assert_equals(axInput.description, "L1 L2");

    input.accessibleNode.describedBy = null;
    assert_equals(axInput.description, "L1 L2");
}, "AccessibleNode.describedBy");
</script>

<ul id="tablist_1" role="tablist">
<li id="tab_1" role="tab" aria-controls="panel_1 panel_2"></li>
</ul>

<div id="panel_1" role="tabpanel">Panel 1</div>
<div id="panel_2" role="tabpanel">Panel 2</div>
<div id="panel_3" role="tabpanel">Panel 3</div>
<div id="panel_4" role="tabpanel">Panel 4</div>

<p id="description"></p>
<div id="console"></div>

<script>
test(function(t) {
    var axTab1 = accessibilityController.accessibleElementById("tablist_1").childAtIndex(0);
    var axPanel1 = accessibilityController.accessibleElementById("panel_1");
    var axPanel2 = accessibilityController.accessibleElementById("panel_2");
    var axPanel3 = accessibilityController.accessibleElementById("panel_3");
    var axPanel4 = accessibilityController.accessibleElementById("panel_4");

    assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1));
    assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2));

    var tab1 = document.getElementById("tablist_1").firstElementChild;
    var panel3 = document.getElementById("panel_3");
    var panel4 = document.getElementById("panel_4");
    tab1.accessibleNode.controls = new AccessibleNodeList();
    tab1.accessibleNode.controls[0] = panel3.accessibleNode;

    assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1));
    assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2));

    tab1.accessibleNode.controls[1] = panel4.accessibleNode;

    assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1));
    assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2));

    tab1.accessibleNode.controls = null;

    assert_true(axTab1.ariaControlsElementAtIndex(0).isEqual(axPanel1));
    assert_true(axTab1.ariaControlsElementAtIndex(1).isEqual(axPanel2));
}, "AccessibleNode.controls");
</script>

<h1 id="item1" aria-flowto="item2 item3"></h1>

<div id="item2">Content 2</div>
<div id="item3">Content 3</div>
<div id="item4">Content 4</div>

<p id="description"></p>
<div id="console"></div>

<script>
test(function(t) {
    var axItem1 = accessibilityController.accessibleElementById("item1");
    var axItem2 = accessibilityController.accessibleElementById("item2");
    var axItem3 = accessibilityController.accessibleElementById("item3");
    var axItem4 = accessibilityController.accessibleElementById("item4");

    assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2));
    assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3));

    var item1 = document.getElementById("item1");
    var item2 = document.getElementById("item2");
    var item3 = document.getElementById("item3");
    var item4 = document.getElementById("item4");

    item1.accessibleNode.flowTo = new AccessibleNodeList();
    item1.accessibleNode.flowTo.add(item4.accessibleNode);

    assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2));
    assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3));

    item1.accessibleNode.flowTo.add(item2.accessibleNode);

    assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3));

    item1.accessibleNode.flowTo = null;

    assert_true(axItem1.ariaFlowToElementAtIndex(0).isEqual(axItem2));
    assert_true(axItem1.ariaFlowToElementAtIndex(1).isEqual(axItem3));
}, "AccessibleNode.flowTo");
</script>

<h1 id="elem1" aria-details="elem2 elem3"></h1>

<div id="elem2">Content 2</div>
<div id="elem3">Content 3</div>
<div id="elem4">Content 4</div>

<p id="description"></p>
<div id="console"></div>

<script>
test(function(t) {
    var axElem1 = accessibilityController.accessibleElementById("elem1");
    var axElem2 = accessibilityController.accessibleElementById("elem2");
    var axElem3 = accessibilityController.accessibleElementById("elem3");
    var axElem4 = accessibilityController.accessibleElementById("elem4");

    assert_true(axElem1.ariaDetailsElementAtIndex(0).isEqual(axElem2));
    assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3));

    var elem1 = document.getElementById("elem1");
    var elem2 = document.getElementById("elem2");
    var elem3 = document.getElementById("elem3");
    var elem4 = document.getElementById("elem4");

    elem1.accessibleNode.details = new AccessibleNodeList();
    elem1.accessibleNode.details.add(elem4.accessibleNode);

    assert_true(axElem1.ariaDetailsElementAtIndex(0).isEqual(axElem2));
    assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3));

    elem1.accessibleNode.details.add(elem2.accessibleNode);

    assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3));

    elem1.accessibleNode.details = null;

    assert_true(axElem1.ariaDetailsElementAtIndex(0).isEqual(axElem2));
    assert_true(axElem1.ariaDetailsElementAtIndex(1).isEqual(axElem3));
}, "AccessibleNode.details");
</script>

<div class="container">
    <ul id="list1" role="listbox" aria-owns="listitem3">
        <li role="option">One</li>
        <li role="option">Two</li>
    </ul>
    <ul role="listbox" id="list2">
        <li role="option" id="listitem3">Three</li>
        <li role="option" id="listitem4">Four</li>
    </ul>
</div>

<script>
test(function(t)
{
    var axList1 = accessibilityController.accessibleElementById("list1");
    assert_equals(axList1.role, "AXRole: AXListBox");
    assert_equals(axList1.childrenCount, 3);

    assert_equals(axList1.childAtIndex(0).name, "One");
    assert_equals(axList1.childAtIndex(1).name, "Two");
    assert_equals(axList1.childAtIndex(2).name, "Three");

    var axList2 = accessibilityController.accessibleElementById("list2");
    assert_equals(axList2.role, "AXRole: AXListBox");
    assert_equals(axList2.childrenCount, 1);
    assert_equals(axList2.childAtIndex(0).name, "Four");

    var list1 = document.getElementById("list1");

    list1.accessibleNode.owns = new AccessibleNodeList();
    assert_equals(axList1.childrenCount, 3);
}, "AccessibleNode.owns");
</script>

<script>
if (window.testRunner)
    document.body.className = "hideAllContainers";
</script>

<input id="input4" aria-invalid="true" aria-errormessage="error1 error2">
<div id="error1">Error 1</div>
<div id="error2">Error 2</div>
<div id="error3">Error 3</div>

<script>
test(function(t) {
    var axInput = accessibilityController.accessibleElementById("input4");
    var axError1 = accessibilityController.accessibleElementById("error1");
    var axError2 = accessibilityController.accessibleElementById("error2");
    var axError3 = accessibilityController.accessibleElementById("error3");
    assert_true(axInput.ariaErrorMessageElementAtIndex(0).isEqual(axError1));
    assert_true(axInput.ariaErrorMessageElementAtIndex(1).isEqual(axError2));

    var input = document.getElementById("input4");
    var error3 = document.getElementById("error3");
    input.accessibleNode.errorMessage = new AccessibleNodeList([error3.accessibleNode]);
    assert_true(axInput.ariaErrorMessageElementAtIndex(0).isEqual(axError1));
    assert_true(axInput.ariaErrorMessageElementAtIndex(1).isEqual(axError2));

    input.accessibleNode.errorMessage.add(error3.accessibleNode);
    assert_true(axInput.ariaErrorMessageElementAtIndex(2) === undefined);

    input.accessibleNode.errorMessage = null;
    assert_true(axInput.ariaErrorMessageElementAtIndex(0).isEqual(axError1));
    assert_true(axInput.ariaErrorMessageElementAtIndex(1).isEqual(axError2));
}, "AccessibleNode.errorMessage");
</script>