# Keyboard Navigation

## 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](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/dateinput/keyboard-navigation)

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](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/multiviewcalendar/keyboard-navigation)

## Resources

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

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/daterangepicker/keyboard/func/source.txt)

## Navigation Scenarios

When the popup of the DateRangePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [MultiViewCalendar](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/multiviewcalendar/keyboard-navigation).

When the inputs of the DateRangePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [DateInput](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs/dateinput/keyboard-navigation).

## See Also

* [Accessibility in KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/accessibility)
* [Accessibility Compliance and Keyboard Support in KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/accessibility/accessibility-compliance)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui-develop/components/dateinputs)