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

49 lines (21 loc) • 2.06 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
## Managing the Focus The TreeList component is a container that consists of 2 logically separated structural elements: - Toolbar (`role="toolbar"`); - Tree Grid (`role="treegrid"`); Each of them is part of the page tab sequence and can be navigated to using the `Tab` key of the keyboard. 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 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 Tree Grid element which points to the id of the currently focused cell. If a cell contains only one focusable element that does not itself require arrow keys for its inner navigation - focus goes to that element instead of its parent `<td>`. If column header cells do not provide functions, such as sort, filter, or column menu, they may not be focusable. If the TreeList contains no items (empty TreeList), the `No data` element in the TreeList should be focused. That applies also for the scenario when the last item in the Grid has been deleted. ## Keyboard Shortcuts The TreeList implements the same keyboard shortcuts as the Grid component. In addition to that, here is the appropriate shortcut to expand/collapse a row: | Shortcut | Behavior | | -------- | -------- | | `Enter` | In expandable and non-editable cell - expands or collapses the item. | ## Resources [ARIA Authoring Practices: Treegrid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)