AutoSuggest
Components
WCAG 2.1 AA: Ideal Support
Component is usable and understandable for the majority of people with or without disabilities. The meaning conveyed and the functionality available is the same.
What component has
Keyboard support
| Key | Function |
|---|---|
Tab |
Moves focus to the next focusable element. |
Shift + Tab |
Moves focus to the previous focusable element. |
Space, Enter, Down Arrow |
When focus is on the AutoSuggest trigger, opens the dropdown with options. |
Up Arrow, Down Arrow |
Moves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively. |
Space, Enter |
Selects the option and closes the dropdown. |
Esc |
Closes the dropdown and returns focus to the AutoSuggest trigger. |
See detailed information for the controlling dropdown with the keyboard in the Keyboard control guide.
Roles and attributes
- For more information about the radio or checkbox list, see Radio button and Checkbox guides.
- For information about the dropdown behavior, see Keyboard support for dropdown.
- Fo more information about the input behavior, refer to Input.
Resources
A11y style guide gives recommendations for the accessible select menus and lists.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.
Automated screen reader testing
Intergalactic v15.23.0, React v18.2.0, Playwright v1.25.1, Guidepup v0.13.1, MacOS Monterey 12.
Running screen reader against this file.
1. Screen reader goes into the active element.
2. Screen reader says "In web content Your website Your website".
3. Screen reader goes to the next element.
4. Screen reader says "Type domain or URL list box pop up Menu pop-up combo box".
5. Screen reader goes into the active element.
6. Screen reader says "In Menu pop-up combo box".
7. Screen reader goes into the active element.
8. Screen reader types "semrush".
9. Screen reader says "semrush".
10. Screen reader goes out of active element.
11. Screen reader goes out of active element.
12. Screen reader says "Out of web content".
13. Screen reader presses the "Tab" button.
14. Screen reader says "Entering Semrush list box. Semrush group".
15. Screen reader goes into the active element.
16. Screen reader says "In Semrush list box Semrush .com text (1 of 1)".
17. Screen reader goes to the next element.
18. Screen reader says "Semrush .com text (1 of 1)".
19. Screen reader goes to the next element.
20. Screen reader presses the "Control+Option+Space" button.
21. Screen reader says "web content".
22. Screen reader goes into the active element.
23. Screen reader goes to the next element.
24. Screen reader says "semrush.com list box pop up Menu pop-up combo box".