Rolecombobox

Rolecombobox refers to the ARIA widget pattern for a single-line control that combines a text input with a list of selectable options. It is used for accessible autocomplete interfaces where users can type to filter options or choose from a list. The widget is typically implemented with a container element bearing role="combobox", a text input (native input element) for typing, and a popup list with role="listbox" containing items with role="option". The two parts work together to provide a cohesive, keyboard-navigable control.

In a typical implementation, the input controls the visibility of the listbox via the aria-expanded attribute, and the relationship between the input and the popup is conveyed using aria-controls or aria-owns. The currently highlighted option is indicated by aria-activedescendant on the input, which points to the id of the active option. The listbox items usually have tabindex="-1" to participate in programmatic focus and aria-selected to reflect selection, while the listbox itself is announced as a collection of options.

Users interact with the combobox using a combination of keyboard and typing. Common patterns include opening the listbox with arrow keys, navigating options with Up and Down arrows, and selecting an option with Enter or Space. Escape typically closes the popup. If the input supports autocompletion, aria-autocomplete communicates whether suggestions are listed or inline, and typing can filter the available options.

Accessibility considerations include maintaining clear focus management, ensuring that aria-expanded and aria-activedescendant accurately reflect state, and providing sufficient descriptive labeling via aria-label or aria-labelledby. Testing should cover keyboard navigation, screen reader behavior, and dynamic updates to the list of options. Variants may be editable or read-only, depending on whether typing is allowed to influence the selection.