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

51 lines (37 loc) • 2.17 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
46
47
48
49
50
51
--- title: Color Gradient category: components slug: color-gradient position: 10 --- # ColorGradient Keyboard Support 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.| ## Resources