## Managing the Focus


Initial focus is on the selected date.

## Keyboard Shortcuts

### Actions applied to the DateInput:


The DatePicker 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 Calendar component:

[Calendar  specification]({{calendar_kb_link}})

### ActionSheet Popup


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

[ActionSheet  specification]({{actionsheet_kb_link}})


The following rules deviate from the standard ActionSheet behavior:

| Shortcut | Behavior |
| -------- | -------- |
| `Tab` | Closes the actionsheet and focuses the next focusable element. |

## Resources

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