ARIA: combobox role

Draft: This page is not complete.

The combobox role is for input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.

Description

A combobox is an input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input. The popup can be a listbox, grid, tree, or dialog.

Associated WAI-ARIA roles, states, and properties

aria-expanded: Include with a value of true or false depending on whether the combobox is open (true) or closed (false).

Keyboard interactions

Down Arrow: Moves focus to the next option, or to the first option if none was selected.
Alt + Down Arrow (Optional): If the popup is available but not displayed, displays the popup without moving focus.
Up Arrow: Moves focus to the previous option. Moving focus to the first option if focus was originally on the last option.
Alt + Up Arrow (Optional): If the popup has focus, returns focus to the combobox, otherwise it closes the popup.
Enter: If the combobox is editable and an autocomplete suggestion is selected in the popup, accepts the suggestion either by placing the input cursor at the end of the accepted value in the combobox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the combobox so the user can add another recipient.

Required JavaScript features

Examples

<label for="jokes">Pick what type of jokes you like</label>
<div class="combo-wrap">
  <input type="text" id="jokes" role="combobox" aria-owns="joketypes" aria-autocomplete="list" aria-expanded="false" data-active-option="item1" aria-activedescendant="item1">
  <span aria-hidden="true" data-trigger="multiselect"></span>
  <ul id="joketypes" role="listbox">
    <li class="active" role="option" id="item1">Puns</li>
    <li class="option" role="option" id="item2">Riddles</li>
    <li class="option" role="option" id="item3">Observations</li>
    <li class="option" role="option" id="item4">Knock-knock</li>
    <li class="option" role="option" id="item5">One liners</li>
  </ul>
</div>

Accessibility Concerns

Best Practices

Prefer HTML

Specifications

Specification	Status
Accessible Rich Internet Applications (WAI-ARIA) 1.1 The definition of 'ARIA: combobox role' in that specification.	Recommendation
WAI-ARIA Authoring Practices 1.2 The definition of 'combobox role' in that specification.	Working Draft