What component has

Keyboard support

Keyboard support

Key	Function
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,	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.

Roles and attributes

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.

Roles and attributes

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".