UNPKG

@progress/wct-a11y-spec

Version:

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

github.com/telerik/web-components-ux/docs

telerik/web-components-ux

29 lines (18 loc) • 1.53 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
## Managing the Focus 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. | ### 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).