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

37 lines (26 loc) • 2.41 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
## Managing the Focus Roving tab index components strategy implemented. Meaning that only one node has tabindex in the menu. Interaction on a `menuitem` should focus it. ## Keyboard Shortcuts ### Actions applied to the Horizontal Menu: | Shortcut | Behavior | | -------- | -------- | | `Up Arrow` | <ul><li>(For root items) Opens the item and focuses the last child.</li> <li>(For child items) Focuses the previous item.</li></ul> | | `Down Arrow` | <ul><li>(For root items) Opens the item and focuses the first child.</li> <li>(For child items) Focuses the next item.</li></ul> | | `Left Arrow` | <ul><li>(For root items) Focuses the previous item.</li> <li>(For child items) For direct children of a root item, focuses and opens the previous root item. Otherwise, closes and focuses the parent.</li></ul> | | `Right Arrow` | <ul><li>(For root items) Focuses the next item.</li> <li>(For child items) If the item has children, opens the item and focuses the first child. Otherwise, focuses and opens the next root item.</li></ul> | | `Home` | Focuses the first item. | | `End` | Focuses the last item. | | `Enter` | Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL. | | `Space` | Selects the focused item. If the item has children, opens the item and focuses the first child. If the item does not have children and has a URL, navigates to the specified URL. | | `Escape` | (For child items) Closes and focuses the parent. | | `Alphanumeric character` | Focuses the next item with text starting with the character. | ### If the Menu is vertical, the arrow keys perform the following actions: | Shortcut | Behavior | | -------- | -------- | | `Up Arrow` | Focuses the previous item. | | `Down Arrow` | Focuses the next item. | | `Left Arrow` | <ul><li>(For root items) opens the item and focuses the last child.</li> <li>(For child items) closes and focuses the parent.</li></ul> | | `Right Arrow` | If the item has children, opens the item and focuses the first child. For child items without children, focuses and opens the next root item. | ## Resources [ARIA Authoring Practices: Menu Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) [ARIA Authoring Practices: Developing a Keyboard Interface](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)