ColorPicker
What component has
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.
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.