## 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:

[DateInput  specification]({{dateinput_kb_link}})


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:

[Calendar  specification]({{calendar_kb_link}})

### Actions applied to the time part of the Popup


TimePicker navigation is handled following the TimePicker component specification:

[TimePicker  specification]({{timepicker_kb_link}})

### ActionSheet Popup


In adaptive mode, the popup element of the DateTimePicker 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/)