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

64 lines (37 loc) • 3.33 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
53
54
55
56
57
58
59
60
61
62
63
64
## Managing the Focus The PropertyGrid component is a container that consists of two logically separated structural elements: - Toolbar (`role="toolbar"`); - Tree Grid (`role="treegrid"`); Each of them is part of the page's tab sequence and you can navigate to them using the keyboard's `Tab` key. The `Toolbar` implements the keyboard navigation specification for a ToolBar component. The below description focuses only on the Tree Grid part (the element with `role="treegrid"`) of the composite component. ## Tree Grid Focus The Tree Grid is a single tab stop component. Upon focusing the Tree Grid, the initial focus is set to either the previously focused cell (if any), or the first data (`<td>`) cell in the Tree Grid. The change of the focused cell should be implemented using one of the following two techniques: - Roving `tabindex`—Use the roving tabindex pattern to manage focus. This means that as users navigate through the cells, the tabindex is dynamically updated to reflect the currently focused cell. - Active descendant—Keep the focus on the Data Grid element itself, and use the `aria-activedescendant` attribute to point to the id of the currently focused cell. If a cell contains only one focusable element that does not require arrow keys itself for its inner navigation, focus goes to that element instead of its parent `<td>`. ## Keyboard Shortcuts ### All Tree 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). | | `Enter` | When the grid is in InCell EditMode, then EditMode is activated. If the cell contains focusable elements, focus moves to the first focusable element inside. | | `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(Mac) + Home` | Moves focus to the first (top-left) data cell in the PropertyGrid. | | `Ctrl/Cmd(Mac) + End` | Moves focus to the last cell in the last row of the PropertyGrid. | | `Alt/Option(Mac)` + `Left Arrow` | Collapses the currently focused item. | | `Alt/Option(Mac)` + `Right Arrow` | Expands the currently focused item. | ### InCell Edit Cell When the editing mode is InCell, the navigation is similar to Excel. When an editor is opened and focus is inside it, the following key combinations are in use. | Shortcut | Behavior | | -------- | -------- | | `Tab` | Moves to the next editor in the row (closing current editor). If focus is already on the last editable cell on the row, focus is moved to the first editable cell on the next row, and it's editor is opened. | | `Shift + Tab` | Moves to the previous editor in the row (closing current editor). If focus is already on the first editable cell on the row, focus is moved to the last editable cell on the previous row, and it's editor is opened. | | `Enter` | Commits changes for the edited item, and moves focus back to the edited cell. | | `Escape` | Cancels the edit. The focus goes to the current cell. | ## Resources [ARIA Authoring Practices: Treegrid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)