Date
WIP: This component is still looking for more testers and some feedback.
A date picker with accessibility baked in.
Features:
- Manages ARIA roles, labels, and attributes.
- Manages focus ring and traps focus within calendar.
- Provides keyboard navigation support (see below).
- Supports passing in min and max date props.
Keyboard navigation:
| Key | Action |
|---|---|
| Enter/Spacebar | Select the currently focused date and hide the calendar. |
| Right | Move to next day. |
| Left | Move to previous day. |
| Down | Move to next week. |
| Up | Move to previous week. |
| Home | Move to beginning of week. |
| End | Move to beginning of week. |
| PageUp | Move to previous month. |
| Shift + PageUp | Move to previous year. |
| PageDown | Move to next month. |
| Shift + PageDown | Move to next year. |
| Esc | Hide the calendar without selecting a date. |
NOTE: I would probably recommend using the browser's built in date picker (<input type="date">) because it's simpler, consistent across website, and it's less code. However, it does not support custom styling.