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

29 lines (19 loc) • 1.97 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
## Managing the Focus The TreeView implements a roving tab index components strategy. On loading the TreeView, only the first node will contain `tabindex="0"` and the navigation keys will move the focus to other nodes and change the respective tabindex. When the focus is moved away from the TreeView, the `tabindex="0"` remains on the last focused node. ## Keyboard Shortcuts The TreeView supports the following keyboard shortcuts: | Shortcut | Behavior | | -------- | -------- | | `Enter` | Selects the focused tree view item when the selection mode is single or multiple. When the selection mode is multiple and there are other selected items, they get deselected. | | `Space` | Checks the checkbox of the TreeView node. | | `Up Arrow` | Goes to the previous tree node. The focus is moved to the previous node and its tabindex is set to `0`. | | `Down Arrow` | Goes to the next tree node. The focus is moved to the next node and its tabindex is set to `0`. | | `Left Arrow` | If the node is expanded, collapses it and the focus remains on the item. If the node is collapsed, the focus is moved to its parent. | | `Right Arrow` | If the node is collapsed, expands it and the focus remains on the item. If the node is expanded, the focus is moved to the first child node. | | `Home` | Moves the focus to the first node in the tree without opening or closing a node. | | `End` | Moves the focus to the last node in the tree that is focusable without opening a node. | | `Ctrl` (or `Cmd` on Mac) + `Enter` | Selects the focused item. When the item is already selected, it gets deselected. | | Printable Characters | Typing `M` or any other printable character focuses the next or the first item in the list. | ## Resources [WAI-ARIA Authoring Practices: Treeview Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) [WAI-ARIA Authoring Practices: Navigation Treeview](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)