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

45 lines (30 loc) • 2.08 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
## Managing the Focus The ColorGradient 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 ColorGradient 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 ColorGradient navigation. | | `Tab` | Navigates to the next focusable element in the ColorGradient. 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 ColorGradient. If current focus is on the first element, moves focus to the last focusable item in the component. | | `Enter` | For button items, ColorGradient executes the currently focused button action. | ### Inner elements shortcuts The inner elements implement the shortcuts for their component type. There are `k-draghandle` (**Slider**) elements and `k-numerictextbox` (**NumericTextBox**) elements. ### k-hsv-draghandle Apart from the default implementation, there is a two-dimensional **Slider** element (`k-hsv-draghandle`) implementing the following arrow keys shortcuts: | Shortcut | Behavior | | -------- | -------- | | `Arrow Up` | Moves slider up by large step. | | `Arrow Down` | Moves slider down by large step. | | `Arrow Left` | Moves slider left by large step. | | `Arrow Right` | Moves 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. |