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

52 lines (32 loc) • 2.15 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
52
## Managing Focus The PivotGrid component is a container that consists of two logically separated structural elements: * Data Grid (`role="grid"`); * Configurator (`role="application"`); // TBD Each of them is part of the page tab sequence and can be navigated to using the `Tab` key of the keyboard. The below description focuses only on the `Data Grid` part (the element with `role="grid"`) of the composite component. ## Data Grid Focus The Data Grid is a single tab stop component. Upon focusing the Data Grid, the initial focus is set to either the previously focused cell (if any), or the first data (`<td>`) cell in the Data Grid. The change of the focused cell should be implemented using one of the following two techniques: * Roving TabIndex components Practice for managing the focus. Meaning that going through the cells will update the tabindex of the cell. * Active descendant - keeping the focus always on the Data Grid and using the `aria-activedescendant` on the Data Grid element which points to the id of the currently focused cell. ## Keyboard Shortcuts ### All Grid cells | Shortcut | Behavior | |----------|----------| | `Right Arrow`| Moves focus one cell to the right (if any)| | `Left Arrow`| Moves focus one cell to the left (if any)| | `Down Arrow`| Moves focus one cell down (if any)| | `Up Arrow`| Moves focus one cell up (if any)| | `Home` | Moves focus to the first cell in the row that contains focus. | | `End` | Moves focus to the last cell in the row that contains focus. | | `Ctrl/Cmd + Home` | Moves focus to the first (top-left) data cell in the grid. | | `Ctrl/Cmd + End` | Moves focus to the last cell in the last row of the Grid. | ### Grid header cells | Shortcut | Behavior | |----------|----------| | `Enter` & `Space` | If the header cell is expandable, toggles the current expanded state. | ### Configurator - TBD ## Resources https://www.w3.org/TR/wai-aria-practices-1.2/#grid https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-for-data-grids https://www.w3.org/TR/wai-aria-practices-1.2/#gridNav https://www.w3.org/TR/wai-aria-practices-1.2/examples/grid/dataGrids.html