Skip to content

ColorPicker

What component has

Keyboard support

Keyboard support
KeyFunction
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.
Space , EnterActivates the selected color.
EscCloses the dropdown.

Roles & attributes

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

Roles and attributes
Component / elementRoles & attributesUsage
ColorPicker.Triggercombobox, 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.Popperdialog, aria-label="Colors palette"dialog identifies the element as a dialog.
ColorPicker.Colors, PaletteManager.Colorslistbox, 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.Colorsaria-label="Preset colors"Adds label to the group of options.
PaletteManager.Colorsaria-label="Custom preset colors"Adds label to the group of customazible options.
ColorPicker.Item, PaletteManager.Itemoption, 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.Itemaria-label="Clear color"Adds label to color items that can be deleted.
PaletteManager.Itemaria-label={value}Adds label to the option.
Button for adding coloraria-label="Add color"Adds label to the button without visible label.
ColorPicker.InputColoraria-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.

Released under the MIT License.

Released under the MIT License.