New to Kendo UI for Vue? Start a free 30-day trial
FlatColorPicker Keyboard Support
The FlatColorPicker is a single-tab-stop component. Its inner navigation is activated by pressing the Enter key. In that case the focus remains trapped within the component elements. The user returns to page navigation by pressing Esc.
Keyboard Shortcuts
When wrapper is focused
| Shortcut | Behavior |
|---|---|
Enter | Activates inner FlatColorPicker navigation. |
Tab | Navigates to the next focusable element on the page. |
Shift + Tab | Navigates to the previous focusable element on the page. |
When inner navigation is activated
| Shortcut | Behavior |
|---|---|
Esc | Moves focus back to wrapper element. Deactivates inner FlatColorPicker navigation. |
Tab | Navigates to the next focusable element in the FlatColorPicker. If current focus is on the last element, moves focus to the first focusable item in the component. |
Shift + Tab | Navigates to the previous focusable element in the FlatColorPicker. If current focus is on the first element, moves focus to the last focusable item in the component. |
Enter | For button items, FlatColorPicker executes the currently focused button action. |
Example
View Source
Change Theme:
Inner elements shortcuts
The inner elements implement the shortcuts for their component type. There are ColorGradient, ColorPalette, and Button elements. Note that the ColorGradient must expose directly its inner navigation when used in a FlatColorPicker (the wrapper must not be focusable itself).
