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.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the ColorGradient
• Accessibility