Loading...
Combobox patterns, keyboard navigation, and result announcements
Search with autocomplete uses the combobox pattern: an input combined with a popup listbox of suggestions. The key roles are combobox, listbox, and option.
The input element gets role="combobox" (or use native input with aria-autocomplete="list").
Set to "true" when suggestions popup is visible, "false" when hidden.
Points to the ID of the currently highlighted option, so screen readers track focus.
Type to search ARIA attributes. Use arrow keys to navigate, Enter to select, Escape to close.
<div>
<!-- Live region for announcements -->
<div role="status" aria-live="polite" className="sr-only">
{announcement}
</div>
<!-- Input with combobox role -->
<input
type="text"
role="combobox"
aria-expanded={isOpen}
aria-controls="search-listbox"
aria-activedescendant={activeId}
aria-autocomplete="list"
aria-label="Search"
/>
<!-- Listbox popup -->
{isOpen && (
<ul id="search-listbox" role="listbox" aria-label="Search results">
<li id="option-1" role="option" aria-selected={activeIndex === 0}>
Result 1
</li>
<li id="option-2" role="option" aria-selected={activeIndex === 1}>
Result 2
</li>
</ul>
)}
</div>