chromium_src/third_party/blink/web_tests/accessibility/aria-controls-with-tabs.html · OpenHarmony-TPC/chromium_src - AtomGit

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body id="body">

<ul id="tablist_1" role="tablist">
<li id="tab_1" role="tab" tabindex="-1" class="">Crust</li>
<li id="tab_2" role="tab" tabindex="-1" aria-controls="panel_2" class="">Veges</li>
</ul>

<h3 tabindex=0 id="elementOutsideTabs">Test</h3>

<div id="panel_1" role="tabpanel" >
<h3 tabindex=0>Select Crust</h3>
</div>

<div id="panel_2" role="tabpanel" >
<h2 id="itemInPanel2" tabindex=0>Select Crust</h2>
</div>

<script>

test((t) => {
    var tabList = accessibilityController.accessibleElementById('tablist_1');
    var tab1 = tabList.childAtIndex(0);
    var tab2 = tabList.childAtIndex(1);

    // we set KB focus to something in panel_2, which means that tab2 should become selected
    // because it aria-controls panel_2
    var panel2Item = document.getElementById("itemInPanel2");
    panel2Item.focus();

    assert_equals(tab2.isSelected, true);

    // reset KB focus and verify that neither tab is selected
    document.getElementById("elementOutsideTabs").focus();
    assert_equals(tab1.isSelected, false);
    assert_equals(tab2.isSelected, false);

    // Set aria-expanded on one of the tabs. This removes selection because
    // implicit selection is disallowed when aria-expanded is used on a tab,
    // and there is not explicit selection.
    document.getElementById("tab_2").setAttribute("aria-expanded", "false");
    assert_equals(tab1.isSelected, false);

    // Now we set aria-selected to be true on tab1 so that it should become selected
    document.getElementById("tab_1").setAttribute("aria-selected", "true");
    assert_equals(tab1.isSelected, true);
}, "This tests that the aria tab item becomes selected if either aria-selected is used, or if aria-controls points to an item that contains KB focus.");

</script>

</body>
</html>