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 (32 loc) • 3.11 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
## Managing the Focus The Diagram comes with keyboard navigation enabled out of the box. The main interactive parts of the Diagram are reachable through the keyboard - the shapes and connections. The Diagram maintains a single tab stop, meaning only the Diagram container is tabbable. Internal items (shapes and connections) are not individually tabbable. The container manages the active item via the `aria-activedescendant` attribute, ensuring a predictable and efficient keyboard experience. ## Focus Model The Diagram uses a roving tabindex pattern where: - Only the Diagram container receives `tabindex="0"` - Shapes and connections are not directly focusable - The active element is indicated via `aria-activedescendant` ## Traversal Order The focus order follows a deterministic pattern based on reading order and connections: 1. Build the list of visible shapes (S) and connections (E) 2. Sort shapes by reading order: top-to-bottom by Y coordinate, then left-to-right by X coordinate 3. For each shape in the sorted list: Add the shape to the focus order, then add all its outgoing connections (not already added), sorted by target shape order 4. Append any remaining connections that haven't been added ## Keyboard Navigation Once the Diagram element receives focus via the keyboard, the focus highlight will be displayed on the first shape in reading order. Navigation through shapes and connections is controlled using the arrow keys. Clicking on a shape or connection moves the focus to the clicked element. | Shortcut | Behavior | | -------- | -------- | | `Tab` | Moves the focus to the next focusable element on the page. | | `Shift + Tab` | Moves the focus to the previous focusable element on the page. | | `Right` arrow key | Moves focus to the next item in the traversal order (next shape or connection). | | `Left` arrow key | Moves focus to the previous item in the traversal order (previous shape or connection). | | `Home` key | Moves focus to the first item in the traversal order. | | `End` key | Moves focus to the last item in the traversal order. | | `Ctrl/Cmd + Up` arrow key | Moves the selected shape upward by a small step. Only works when a shape is focused. | | `Ctrl/Cmd + Down` arrow key | Moves the selected shape downward by a small step. Only works when a shape is focused. | | `Ctrl/Cmd + Left` arrow key | Moves the selected shape to the left by a small step. Only works when a shape is focused. | | `Ctrl/Cmd + Right` arrow key | Moves the selected shape to the right by a small step. Only works when a shape is focused. | | `Shift + Ctrl/Cmd + Up` arrow key | Moves the selected shape upward by a large step. Only works when a shape is focused. | | `Shift + Ctrl/Cmd + Down` arrow key | Moves the selected shape downward by a large step. Only works when a shape is focused. | | `Shift + Ctrl/Cmd + Left` arrow key | Moves the selected shape to the left by a large step. Only works when a shape is focused. | | `Shift + Ctrl/Cmd + Right` arrow key | Moves the selected shape to the right by a large step. Only works when a shape is focused. |