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

ShortcutBehavior
EnterActivates inner FlatColorPicker navigation.
TabNavigates to the next focusable element on the page.
Shift + TabNavigates to the previous focusable element on the page.

When inner navigation is activated

ShortcutBehavior
EscMoves focus back to wrapper element. Deactivates inner FlatColorPicker navigation.
TabNavigates 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 + TabNavigates 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.
EnterFor 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).