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

45 lines (30 loc) • 2.03 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
## Keyboard Shortcuts This section lists the keyboard shortcuts supported by the ComboBox composite elements. ### ComboBox Wrapping Element The following table summarizes the keyboard combinations and input behavior supported by the ComboBox wrapper element: | Shortcut | Behavior | | -------- | -------- | | Typing in the input | Focuses the matched item. | | `Down Arrow` | Highlights the next available item. | | `Up Arrow` | Highlights the previous available item. | | `Enter` | Selects the focused item. | | `Alt` (or `Opt` on Mac) + `Down` | Opens the popup. | | `Alt` (or `Opt` on Mac) + `Up` or `Esc` | Closes the popup. | | `Esc` | If the popup is not visible, clears the value. | ### Listbox Popup The popup element of the ComboBox has to implement the keyboard navigation 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: Editable Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-none/)