@progress/wct-a11y-spec/dist/react/keyboard/daterangepicker_keyboard.md

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

## Managing the Focus


Focus goes through the two date inputs. The popup becomes the active element when it is opened, but it is not the focused element at any point.

## Keyboard Shortcuts

### Actions applied to the DateInput:


The DateRangePicker implements the keyboard shortcuts for the DateInput component:

[DateInput  specification]({{dateinput_kb_link}})


Apart from that, it also features the following shortcuts related to ist Popup:

| Shortcut | Behavior |
| -------- | -------- |
| `Esc` | Closes the popup |
| `Alt/Opt(Mac) + Down` | Opens the popup |
| `Alt/Opt(Mac) + Up` | Closes the popup |

### Actions applied to the Calendar:


Ones the popup is open, navigation is handled through the **MultiViewCalendar** component:

[MultiViewCalendar  specification]({{multiviewcalendar_kb_link}})

### ActionSheet Popup


In adaptive mode, the popup element of the DateRangePicker has to implement the keyboard navigation specification for an ActionSheet component.

[ActionSheet  specification]({{actionsheet_kb_link}})

## Resources

[ARIA Authoring Practices: Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)