Time picker

How to test a time picker

Gherkin Condensed

Given that I am on a screen with a time picker

WHEN I use the tab key to move focus to a time slot (text input, button, checkbox) I SEE focus is visually indicated
Then when I use spacebar or enter to activate the button I SEE the action occurs

WHEN I use a screenreader AND I swipe to focus on a button
- I HEAR Its purpose is clear and matches visible label
- I HEAR It identifies its role (text input, button, checkbox)
- I HEAR Any visible label is read with the button in a single swipe. Dial selector reads selection of total (“Hour 7 of 12”)
- I HEAR It expresses its state (disabled, selected, etc)
Then when I doubletap with the button in focus I HEAR the action occurs

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

When I use	I see/hear
Tab or arrow keys	Focus visibly moves to a time slot
Spacebar or enter	Activates the time slot

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

Reads	I hear
Name	Its purpose is clear and matches visible label
Role	It identifies its role (text input, button, checkbox)
Group	Any visible label is read with the button in a single swipe. dial selector reads selection of total (“hour 7 of 12”)
State	It expresses its state (disabled, selected, etc)

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

Time pickers help users select and set a specific time through a mixture of components:

Time pickers come in two types: dial and input

Time pickers must allow manual time entry through text input, rather than exclusively through the dial selector.