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

38 lines (29 loc) • 2.05 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
## Managing Focus The component is a single tab stop with focusable wrapper (the element with `role="grid"`). It uses `aria-activedescendent` to keep the info for the currently focused date cell. ## Keyboard Shortcuts ### Single and multiple selection mode | Shortcut | Behavior | |----------|----------| | `Down Arrow`| Moves focus to down cell, or navigates the view if currently focused date is in the last row of the current view period. | | `Up Arrow`| Moves focus to upper cell, or navigates the view if currently focused date is at the top row of the current view period. | | `Left Arrow`| Moves focus to previous date/month/year/decade. | | `Right Arrow`| Moves focus to next date/month/year/decade. | | `Enter` | Selects the focused date. | | `Ctrl + Up Arrow` | Navigates to the upper view (e.g., from current month days, to the year). | | `Ctrl + Down Arrow` | Navigates to the lower view (e.g., from the months in the year to the days of the month). | | `Home` | Focuses the first day of the month. | | `End` | Focuses the last day of the month. | | `PageUp` | Focuses the same date in the previous month. | | `PageDown` | Focuses the same date in the next month. | | `t` | Navigates to today's month view and focuses the current date. | ### Multiple Selection mode only | Shortcut | Behavior | |----------|----------| | `Ctrl` + `Enter` | Adds the highlighted day to the current selection. If that day was already selected it is removed from the selection. | | `Shift` + `Left Arrow` | Adds the previous date to the selected items. | | `Shift` + `Right Arrow` | Adds the next date to the selected items. | | `Shift` + `Up Arrow` | Extends selection up one row in month view. | | `Shift` + `Down Arrow` | Extends selection down one row in month view. | | `Shift` + `Enter` | Performs range selection, selects all dates between the last selected one (with Enter or mouse click) and the one being currently focused. | ## Resources https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html#kbd_label_5