aria-combo-box-with-delay.html | Explore in Territory

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

<div role="main">
  <input id="comboBox"
      role="combobox"
      type="search"
      aria-autocomplete="list"
      aria-expanded="true"
      aria-haspopup="true"
      aria-activedescendant="state2"
      aria-owns="stateList">

  <ul id="stateList"
      role="listbox"
      style="display: none;">
    <li id="state1" role="option">Alabama</li>
    <li id="state2" role="option">Alaska</li>
  </ul>
</div>

<script>
  setup(() => {
    document.body.offsetTop;
    window.comboBox = accessibilityController.accessibleElementById('comboBox');
    document.querySelector('input').focus();
    document.querySelector('ul').style.display = 'block';
  });

  test((t) => {
      assert_true(window.comboBox.isFocused, 'Combo box should be focused.');
      let state1 = accessibilityController.accessibleElementById('state1');
      assert_false(state1.isSelected, 'State1 should not be selected.');
      assert_false(state1.isFocused, 'State1 should not be focused.');

      let state2 = accessibilityController.accessibleElementById('state2');
      assert_equals(window.comboBox.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((t) => {
      document.querySelector('input').setAttribute('aria-activedescendant', 'state1');

      assert_true(window.comboBox.isFocused, 'Combo box should be focused.');
      let state1 = accessibilityController.accessibleElementById('state1');
      assert_equals(window.comboBox.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');
      assert_false(state2.isSelected, 'State2 should not be selected.');
      assert_false(state2.isFocused, 'State2 should not be focused.');

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