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 (29 loc) • 2.28 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
## Keyboard Shortcuts The DropDownList supports the following keyboard shortcuts: | Shortcut | Behavior | | -------- | -------- | | `Down Arrow` | Selects the next available item. | | `Up Arrow` | Selects the previous available item. | | `Home` | Selects the first available item. Shortcut is not applicable when the current focused item is the filter textbox. Then focused is in a textbox, home and end keys control the cursor position. | | `End` | Selects the last available item. Shortcut is not applicable when the current focused item is the filter textbox. Then focused is in a textbox, home and end keys control the cursor position. | | `Enter` | Opens popup | | `Space` | Opens popup | | `Alt/Opt(Mac) Down` | Opens popup | | `Alt/Opt(Mac) Up` or `Esc` | `Closes popup | | `printable characters` | Typing "M" or any other printable character should select the next or first item in the list. Swiftly typing should capture multiple printable characters after the first one. | The Popup element of the component must implement the KB specification for a Popup List component: | Shortcut | Behavior | | -------- | -------- | | `Down Arrow` | Moves the focus to the next item. | | `Up Arrow` | Moves the focus to the previous item. | | `Alt` (or `Opt` on Mac) + `Up Arrow` or `Esc` | Closes the popup. | | `Home` | Moves the focus to the first item. Applicable only when the currently focused element is not an input. When an input is the focused element, the `Home` and `End` keys are used for the cursor position. | | `End` | Moves the focus to the last item. Applicable only when the currently focused element is not an input. When an input is the focused element, the `Home` and `End` keys are used for the cursor position. | | `Enter` | Selects the item. | | `Page Up` | Scrolls the popup list up. | | `Page Down` | Scrolls the popup list down. | | `Tab` | Closes the popup and focuses the next focusable element. | ## Resources [WAI-ARIA Authoring Practices: Combobox Pattern ](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) [WAI-ARIA Authoring Practices: Listbox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) [WAI-ARIA Authoring Practices: Select-Only Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/)