Role and semantics
Section titled “Role and semantics”Autocomplete is built on Base UI Autocomplete and follows the APG combobox with list autocomplete pattern. The input has the combobox role, carries aria-autocomplete and is named by the Field label. The list has the listbox role and the suggestions the option role.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Letter keys | Type and filter the list. |
| Up, Down | Highlight suggestions. |
| Enter | Write the highlighted suggestion into the field. |
| Escape | Close the list; the text stays. |
| Tab | Close the list and move to the next element. |
Focus stays in the input; the highlighted suggestion is exposed with aria-activedescendant. The field shows a 2 px color-focus-ring outline 2 px outside the box with focus-visible.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Input | “City, combo box, autocomplete list” |
| Highlighted suggestion | “İzmir, 1 of 3” |
| Loading | “Loading” (status region) |
Contrast
Section titled “Contrast”The border has 3:1 contrast; text and suggestions 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Autocomplete meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | Field label and aria-describedby. |
Give every field a label. |
| 2.1.1 Keyboard | Arrows, Enter, Escape. | - |
| 4.1.2 Name, role, value | combobox, listbox, option. |
Keep suggestions unique. |
| 4.1.3 Status messages | Loading is read from the status region. | Clear loading when the server answers. |