Keyboard Navigation
Managing the Focus
The initial focus is on the selected date.
Focus is trapped in the picker's popup. Meaning that once the popup is opened, Tab key will go only through its content.
Keyboard Shortcuts
Actions applied to the DateInput
The DateInput part of the component implements the specification for the DateInput component:
In addition to that it also features the following shortcuts:
| Shortcut | Behavior |
|---|---|
Esc | Discards the selection and closes the popup. |
Enter | Enters in time edit if calendar is the target. Otherwise, accepts the selected time and closes the popup. |
Alt/Opt(Mac) + Down | Opens the dropdown and moves the focus to the displayed calendar. |
Alt/Opt(Mac) + Up | Closes the dropdown and moves the focus to the input element. |
Actions applied to the calendar part of the Popup
Calendar navigation is handled following the Calendar component specification:
Actions applied to the time part of the Popup
TimePicker navigation is handled following the TimePicker component specification:
Resources
ARIA Authoring Practices: Date Picker Dialog
Navigation Scenarios
When the popup of the DateTimePicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the Calendar or the time part.
When the input of the DateTimePicker is focused, it adopts the same keyboard shortcuts as the keyboard shortcuts of the DateInput.