Skip to content

AutoSuggest

What component has

Keyboard support

Keyboard support
KeyFunction
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
EnterWhen the dropdown is closed: opens the dropdown.
When the dropdown is open: closes the dropdown. If an option was selected, applies its value to the input.
Up Arrow , When the dropdown is closed: opens the dropdown.
When the dropdown is open: moves selection between the options in the list. If the last/first option is selected, moves selection to the first/last option respectively.
EscCloses the dropdown.

Roles and attributes

For more information about the accessibility of these patterns, refer to the documentation of the components used in them:

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Automated screen reader testing

Intergalactic v15.29.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".
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".

Released under the MIT License.

Released under the MIT License.