Date picker

How to test a date picker

Gherkin Condensed

Given that I am on a screen with a date picker

1 Keyboard

WHEN I use the tab key to move focus to an individual control (text input, button, date) I SEE focus is visually indicated
Then when I use spacebar or enter to activate the button I SEE the selection is made

2 Android screenreader

WHEN I use a screenreader AND I swipe to focus on an individual control (text input, button, date)
- I HEAR its purpose is clear and matches or extends visible label
- I HEAR each item identifies its role (combo box for text input, button, full date for selection ex: "17" = "Monday, August 17")
- I HEAR each component is a separately focusable item
- I HEAR each item can expresses its state (disabled, selected, etc)
Then when I doubletap with the control in focus I HEAR the selection is made

3 Device settings

When I use Text resize I SEE text can resize up to 200% without losing information

1 Keyboard actions

When I use	I see/hear
Tab or arrow keys	Focus visibly moves to a date
Spacebar or enter	Activates the control
Page up/down	Move to the same date on next/previous month
Home/end	Move to the first day of the
Shift + page up/down	Moves to the same date in the next/previous year
Shift + m	Moves to the month list dropdown
Shift + y	Moves to the year list dropdown

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves to the element, expresses its name, role, state
Doubletap	Activates the control

3 Screenreader output

Reads	I hear
Name	Its purpose is clear and matches or extends visible label
Role	Each item identifies its role (combo box for text input, button, full date for selection ex: "17" = "monday, august 17")
Group	Each component is a separately focusable item
State	Each item can expresses its state (disabled, selected, etc)

4 Device settings

When I use	I see
Text resize	Text can resize up to 200% without losing information

Usage

The date entry component offers two ways to enter a date:

Direct text entry into a text field
Through the date picker dialog

The calendar icon is the exclusive entry point for the date picker.

Text entry

Automatically format the date after the user hits “Enter“ or navigates out of the text field.

Don’t automatically format the date by adding slashes or other special characters while the user is typing (also known as input masks). This can cause confusion for people using screen readers because it changes what they typed.

To reduce errors, accept a range of formats including dashes, spaces, slashes, dots, and 0 to the left of a single digit month/day. This is especially helpful for assistive technology users who might be more prone to errors when interacting with complex inputs.

Material guidance

Material accessibility overview