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

40 lines (30 loc) • 2.19 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
## Managing the Focus The ListBox component contains a list of items and, optionally, a toolbar. When the toolbar is not enabled, the component is a single-tab-stop component. When the toolbar is present, it is included in the tab sequence of the page. Depending on its position and the LTR or RTL configuration, the toolbar can either preceed or succeed the list of ListBox items. Its tab position must respect its position on the screen. ## Keyboard Shortcuts ### `list` Element | Shortcut | Behavior | | -------- | -------- | | `F10` | Focuses the ListBox toolbar (the last focused or the first button in it). | | `Space` | Selects the focused ListBox Item | | `Up Arrow` | Selects the previous item. | | `Down Arrow` | Selects the next item. | | `Ctrl` (or `Control` on Mac) + `Space` | Selects or deselects an item. | | `Shift` + `Up Arrow` | Adds the previous item to the selected items. | | `Shift` + `Down Arrow` | Adds the next item to the selected items. | | `Ctrl` (or `Cmd` on Mac) + `Up Arrow` | Moves the focus to the previous item. | | `Ctrl` (or `Cmd` on Mac) + `Down Arrow` | Moves the focus to the next item. | | `Del` | Deletes the selected items. | | `Ctrl` (or `Cmd` on Mac) + `Right Arrow` | Adds the selected items to the connected ListBox. | | `Ctrl` (or `Cmd` on Mac) + `Left Arrow` | Adds the selected items from the connected ListBox to the current one. | | `Ctrl` (or `Cmd` on Mac) + `Shift` + `Up Arrow` | Shifts the selected items upwards. | | `Ctrl` (or `Cmd` on Mac) + `Shift` + `Down Arrow` | Shifts the selected items downwards. | | `Ctrl` (or `Cmd` on Mac) + `Shift` + `Right Arrow` | Transfers all items to the connected ListBox. | | `Ctrl` (or `Cmd` on Mac) + `Shift` + `Left Arrow` | Transfers all items from the connected ListBox. | ### `toolbar` Element | Shortcut | Behavior | | -------- | -------- | | `Right Arrow` or `Down Arrow` | Focuses the next button in the toolbar. | | `Left Arrow` or `Up Arrow` | Focuses the previous button in the toolbar. | | `Enter` | Executes the currenly focused button command if enabled. | ## Resources [WAI-ARIA Authoring Practices: Listbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)