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

39 lines (29 loc) • 2.12 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
## Managing the Focus The component is a single tab stop with focusable wrapper (the element with `role="grid"`). It uses `aria-activedescendant` 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/Cmd(Mac) + Up Arrow` | Navigates to the upper view (e.g., from current month days, to the year). | | `Ctrl/Cmd(Mac) + 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/Cmd(Mac)` + `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 [ARIA Authoring Practices: Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)