selection-follows-focus.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div role="listbox" id="listbox" tabindex="0" aria-activedescendant="opt3">
    <div id="opt1" role="option">Option 1</div>
    <div id="opt2" role="option" aria-selected="false">Option 2</div>
    <div id="opt3" role="option">Option 3</div>
</div>

<div role="listbox" id="listbox2">
    <div id="opt2.1" role="option">Option 2.1</div>
</div>

<div role="tree" id="tree">
    <div id="treeitem1" role="treeitem" tabindex="-1">Tree item 1</div>
    <div id="treeitem2" role="treeitem">Tree item 2</div>
</div>

<script>
var listbox = document.getElementById("listbox");

function axElementById(id) {
    return accessibilityController.accessibleElementById(id);
}

test(function(t) {
    listbox.focus();
    var axOption1 = axElementById("opt1");
    assert_equals(axOption1.isSelectable, true);
}, "Descendant widgets are selectable in a single selection container");

test(function(t) {
    listbox.focus();
    listbox.setAttribute("aria-activedescendant", "opt1");
    var axOption1 = axElementById("opt1");
    assert_equals(axOption1.isSelected, true);
}, "Selection follows activedescendant in a single selection container");

test(function(t) {
  var axOption = axElementById("opt2.1");
  assert_equals(axOption.isSelectable, true);
}, "Options are selectable even if it is not clear they can be from markup");

test(function(t) {
    listbox.focus();
    listbox.setAttribute("aria-activedescendant", "opt2");
    var axOption2 = axElementById("opt2");
    assert_equals(axOption2.isSelected, false);
}, "Selection doesn't follow activedescendant when aria-selected=false");

test(function(t) {
    listbox.focus();
    listbox.setAttribute("aria-activedescendant", "opt2");
    var axOption1 = axElementById("opt1");
    assert_equals(axOption1.isSelected, false);
}, "Only focused item is marked as selected in a single selection container");

test(function(t) {
    document.getElementById('treeitem1').focus();
    var treeitem1 = axElementById("treeitem1");
    assert_equals(treeitem1.isSelected, true);
}, "Selection follows tabindex focus in a single selection container");

test(function(t) {
    document.getElementById('treeitem2').focus();
    var treeitem2 = axElementById("treeitem2");
    assert_equals(treeitem2.isSelected, false);
}, "Selection doesn't follow focus when aria-selected=false");

</script>
chromium/third_party/blink/web_tests/accessibility/selection-follows-focus.html
