What component has

Keyboard support

Keyboard support

Key	Function
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Space , Enter	Activates the selected color.
Esc	Closes the dropdown.

Roles & attributes

The following list describes roles and attributes that the component already has.

Roles and attributes

Component / element	Roles & attributes	Usage
ColorPicker.Trigger	combobox, aria-haspopup="dialog", aria-label="Color field"	combobox identifies an element as an input that controls another element, such as a listbox or grid , that can dynamically pop up to help the user set the value of that input. aria-haspopup="dialog" indicates that a dialog popup can be triggered by the element with this attribute.
ColorPicker.Popper	dialog, aria-label="Colors palette"	dialog identifies the element as a dialog.
ColorPicker.Colors, PaletteManager.Colors	listbox, aria-orientation="horizontal"	listbox identifies the focusable element that has listbox behaviors and contains the listbox options. aria-orientation indicates thet the element's orientation is horizontal.
ColorPicker.Colors	aria-label="Preset colors"	Adds label to the group of options.
PaletteManager.Colors	aria-label="Custom preset colors"	Adds label to the group of customazible options.
ColorPicker.Item, PaletteManager.Item	option, aria-selected="true/false"	option identifies each selectable element containing the name of an option. aria-selected="true/false" indicates that the option is selected or not.
ColorPicker.Item	aria-label="Clear color"	Adds label to color items that can be deleted.
PaletteManager.Item	aria-label={value}	Adds label to the option.
Button for adding color	aria-label="Add color"	Adds label to the button without visible label.
ColorPicker.InputColor	aria-label="Custom color, HEX format"	Provides more details on the data format that can be submitted to the input.

Other recommendations

Find more accessibility recommendations in the common Accessibility guide.