New to Kendo UI for Angular? Start a free 30-day trial
Keyboard Navigation
The keyboard navigation of the ColorGradient is always available.
The ColorGradient supports the following keyboard shortcuts when the wrapper is focused:
| SHORTCUT | DESCRIPTION |
|---|---|
Enter | Activates the internal ColorGradient navigation. |
Tab | Navigates to the next focusable element on the page. |
Shift + Tab | Navigates to the previous focusable element on the page. |
The ColorGradient internal navigation supports the following keyboard shortcuts*:
| SHORTCUT | DESCRIPTION |
|---|---|
Esc | Moves focus back to wrapper element. Deactivates the internal ColorGradient navigation. |
Tab | Navigates to the next focusable element in the ColorGradient. If the focus is on the last element, focuses the first focusable item in the component. |
Shift + Tab | Navigates to the previous focusable element in the ColorGradient. If the focus is on the first element, focuses the last focusable item in the component. |
Enter | Executes the action, associated with the focused button. |
* All inner components within the ColorGradient follow their own keyboard navigation behavior when focused.
The ColorGradient two-dimensional HSV-gradient Slider draghandle supports the following keyboard shortcuts
| SHORTCUT | DESCRIPTION |
|---|---|
Arrow Up | Moves the slider up by large step. |
Arrow Down | Moves the slider down by large step. |
Arrow Left | Moves the slider left by large step. |
Arrow Right | Moves the slider right by large step. |
Shift + Arrow Up | Moves slider up by small step. |
Shift + Arrow Down | Moves slider down by small step. |
Shift + Arrow Left | Moves slider left by small step. |
Shift + Arrow Right | Moves slider right by small step. |
The following example demonstrates the ColorGradient keyboard navigation.
Example
View Source
Change Theme:
