Select / Multiselect
What component has
Keyboard support
Key | Function |
---|---|
Tab , Shift + Tab | Moves focus to the next (or previous) focusable element. When the dropdown is open, the focus cycles through the focusable elements within the dropdown. |
Space , Enter | Opens and closes the dropdown. When the dropdown is open and an option is highlighted, selects or deselects the highlighted option. |
Up Arrow , Down Arrow | Opens the dropdown. When the dropdown is open, moves the highlight through the options. If the last/first option is highlighted, it moves to the first/last option respectively. |
Esc | Closes the dropdown without changing the Select value. |
Roles and attributes
The following list describes roles and attributes that component already has.
Component | Attribute | Usage |
---|---|---|
Select.Trigger | role="combobox" | Identifies the element as a combobox, that is an input that opens a list of options or a grid. |
aria-activedescendant="IDREF" | When the list is open, indicates which option is currently highlighted. | |
aria-autocomplete="list" | Only if an Input is used as the trigger. Indicates that a list of values that could complete the input is provided during input. | |
aria-controls="IDREF" | Identifies the element controlled by the trigger. If Select.Popper is used explicitly, refers to Select.Popper . Otherwise, refers to Select.List . | |
aria-disabled="true/false" | Indicates whether the Select is disabled or enabled. | |
aria-expanded="true/false" | Indicates whether the dropdown is open or closed. | |
aria-haspopup="dialog/listbox" | If Select.Popper is used explicitly, indicates that the trigger opens a dialog. Otherwise, indicates that the trigger opens a list of options. | |
Select.Popper | role="dialog" | Only if Select.Popper is used explicitly. Identifies the popper as a dialog. |
Select.List | role="listbox" | Identifies the element as a list of options. |
aria-label | Defines an accessible name for the list of options. Automatically populated from the accessible name of the trigger. | |
aria-multiselectable="true" | Only if the multiselect property is set. Indicates that multiple options can be selected. | |
Select.Option | role="option" | Identifies the element as a selectable item in a listbox. |
aria-selected="true/false" | Indicates whether the option value is currently selected. | |
aria-disabled="true/false" | Indicates whether the option is disabled or enabled. | |
Select.InputSearch.Clear | aria-label="Clear search field" | Defines an accessible name for the Clear button. |
Considerations for developers
Only use Select.Popper
explicitly if it must have additional elements beside the list, such as InputSearch
or Notice
, as in the menu customization example and the option filtering example. In that case the popper will be presented as a dialog, which hints to the screen reader user to use the Tab
key to navigate between the list of options and other elements.
If your Select
is a list of options without additional features, use it without children or with Select.Menu
, as in the basic example. This will let the screen reader user know that Up
and Down
keys are enough to navigate within the control.
Roles and attributes
The following list will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.
Component | Attribute | Usage |
---|---|---|
Select.Popper | aria-label or aria-labelledby | Only if Select.Popper is used explicitly. Defines an accessible name for the popper. |
Select.InputSearch | aria-describedby="IDREF" | Defines an accessible description for the Search input. Use it to announce the number of search results, as demonstrated in the options filtering example. |
Resources
Refer to the ARIA Authoring Practices Guide from W3C to explore a select-only combobox example.
Other recommendations
Find 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 "Select option list box pop up button".
3. Screen reader presses the "Control+Option+Space" button.
4. Screen reader presses the "Tab" button.
5. Screen reader says "Entering Select option list box. Select option group".
6. Screen reader goes into the active element.
7. Screen reader says "In Select option list box Option 0 text (1 of 6)".
8. Screen reader goes to the next element.
9. Screen reader says "Option 1 text (2 of 6)".
10. Screen reader presses the "Control+Option+Space" button.
11. Screen reader says "Label 1 Select option list box pop up button".