Date picker - Accessibility
A date picker allows the user to select a specific calendar date.
Principle
Users should be able to manually enter a date, whether or not they interact with the date picker component.
Keyboard Navigation
For Input Field:
1st Tab key
Focus moves to the day field (“dd”), allowing the user to manually enter a day value.
Pressing ↑ or ↓ increments or decrements the day (01–31).
2nd Tab key
Focus moves to the month field (“mm”), allowing the user to manually enter a month value.
Pressing ↑ or ↓ increments or decrements the month (01–12).
3rd Tab key
Focus moves to the year field (“yyyy”), allowing the user to manually enter a year.
Pressing ↑ or ↓ increments or decrements the year (starting from the current year).
4th Tab key
Focus moves to the calendar icon.
Pressing Enter opens the calendar popover. Pressing Enter again closes it.
5th Tab key
Moves focus to the next interactive element in the interface.
Once the Calendar Popover is Open:
1st Tab key
Focus moves to the previous month button <.
Pressing Enter navigates to the previous month.
2nd Tab key
Focus moves to the next month button >.
Pressing Enter navigates to the next month.
3rd Tab key
Focus moves to the current date in the calendar grid.
Use the arrow keys ← → ↑ ↓ to navigate between available dates.
Pressing Enter selects the focused date and updates the input field.
4th Tab key
Moves focus to the next interactive element in the interface. The calendar popover closes.
VoiceOver / Screen Reader
It's not necessary to explain how to use, open, or close the date picker when the text field receives focus — as long as its behavior is intuitive and accessible.
Questions?
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system