aria-combo-box.html | Explore in Territory

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

<input role="combobox"
    type="search"
    aria-autocomplete="list"
    aria-expanded="true"
    aria-haspopup="true"
    aria-activedescendant="state20"
    aria-owns="stateList0">

<ul id="stateList0"
    role="listbox">
  <li id="state10" role="option">Alabama</li>
  <li id="state20" role="option">Alaska</li>
</ul>

<input role="combobox"
    type="search"
    aria-autocomplete="list"
    aria-expanded="true"
    aria-haspopup="true"
    aria-activedescendant="state21"
    aria-controls="stateList1">

<ul id="stateList1"
    role="listbox">
  <li id="state11" role="option">Alabama</li>
  <li id="state21" role="option">Alaska</li>
</ul>

<input role="combobox"
    type="search"
    aria-autocomplete="list"
    aria-expanded="true"
    aria-haspopup="true"
    aria-activedescendant="state22"
    aria-controls="stateList2"
    aria-owns="stateList2">

<ul id="stateList2"
    role="listbox">
  <li id="state12" role="option">Alabama</li>
  <li id="state22" role="option">Alaska</li>
</ul>

<script>
  test(() => {
    for (let i = 0; i < 3; ++i) {
      document.querySelectorAll('input')[i].focus();

      let state1 = accessibilityController.accessibleElementById('state1' + i);
      assert_false(state1.isSelected, 'State1 should not be selected.');
      assert_false(state1.isFocused, 'State1 should not be focused.');

      let state2 = accessibilityController.accessibleElementById('state2' + i);
      assert_equals(accessibilityController.focusedElement.activeDescendant, state2, 'State2 should be the active descendant.');
      assert_true(state2.isSelected, 'State2 should be selected.');
      assert_false(state2.isFocused, 'State2 should not be focused.');
    }
  }, 'An option with an activedescendant pointing to it is selected.');

  test(() => {
    for (let i = 0; i < 3; ++i) {
      document.querySelectorAll('input')[i].focus();
      document.querySelectorAll('input')[i].setAttribute('aria-activedescendant', 'state1' + i);

      let state1 = accessibilityController.accessibleElementById('state1' + i);
      assert_equals(accessibilityController.focusedElement.activeDescendant, state1, 'State1 should be the active descendant.');
      assert_true(state1.isSelected, 'State1 should be selected.');
      assert_false(state1.isFocused, 'State1 should not be focused.');

      let state2 = accessibilityController.accessibleElementById('state2' + i);
      assert_false(state2.isSelected, 'State2 should not be selected.');
      assert_false(state2.isFocused, 'State2 should not be focused.');

      document.querySelectorAll('input')[i].setAttribute('aria-activedescendant', 'state2' + i);
    }
  }, 'Changing the activedescendant should change the item that is selected.');
</script>
chromium/third_party/blink/web_tests/accessibility/aria-combo-box.html
