aria1.1-combobox.html | Explore in Territory

<!DOCTYPE html>
<!--
@MAC-ALLOW:AXFocused=1
@MAC-ALLOW:AXLinkedUIElements
@MAC-DENY:AXLinkedUIElements=[]
@MAC-ALLOW:AXTitleUIElement
@WIN-DENY:description*
@WIN-ALLOW:FOCUS*
@WIN-ALLOW:haspopup*
@WIN-ALLOW:ia2_hypertext=*
@WIN-ALLOW:SELECT*
@AURALINUX-ALLOW:collapsed*
@AURALINUX-ALLOW:expand*
@AURALINUX-ALLOW:haspopup:*
@BLINK-ALLOW:haspopup*
@BLINK-ALLOW:focus*
-->
<html>
  <body>
    <div id="state_label">State</div>

    <!-- For the first combo box, we dynamically set aria-controls. -->
    <div role="combobox"
        aria-autocomplete="list"
        aria-expanded="true"
        aria-haspopup="listbox"
        aria-labelledby="state_label">
      <input type="text"
      aria-activedescendant="list1-state2"
      autofocus>
    </div>

    <ul id="state_list1" role="listbox">
      <li id="list1-state1" role="option">Alabama</li>
      <li id="list1-state2" role="option">Alaska</li>
    </ul>

    <!-- For the second combo box, we dynamically set aria-controls and
        aria-activedescendant and don't auto focus. -->
    <div role="combobox"
        aria-autocomplete="list"
        aria-expanded="true"
        aria-haspopup="listbox"
        aria-labelledby="state_label">
      <input type="text">
    </div>

    <ul id="state_list2" role="listbox">
      <li id="list2-state1" role="option">Alabama</li>
      <li id="list2-state2" role="option">Alaska</li>
    </ul>

    <script>
      document.querySelectorAll('input')[0].setAttribute('aria-controls', 'state_list1');
      document.querySelectorAll('input')[1].setAttribute('aria-controls', 'state_list2');
      document.querySelectorAll('input')[1].setAttribute('aria-activedescendant', 'list2-state1');
    </script>
  </body>
</html>
chromium/content/test/data/accessibility/aria/aria1.1-combobox.html
