Chips

How to test a chips

Gherkin Condensed

Given that I am on a screen with a chips

WHEN I use the tab key or arrow key to move focus to a chip I SEE focus is visually indicated
Then when I use spacebar or enter to activate the chip I SEE the action occurs

WHEN I use a screenreader AND I swipe to focus on a chip
- I HEAR its purpose is clear and matches visible label
- I HEAR it identifies itself as a button, radio button or checkbox
- I HEAR any visible label is read with the chip in a single swipe
- I HEAR it expresses its state (checked, unchecked, disabled, etc)
Then when I doubletap with the chip 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 the chip
Spacebar or enter	Activates the chip
Backspace or delete	Removes current focused input chip

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

Reads	I hear
Name	Its purpose is clear and matches visible label
Role	It identifies itself as a button, radio button or checkbox
Group	Any visible label is read with the chip in a single swipe
State	It expresses its state (checked, unchecked, disabled, etc)

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

Usage

Chips help people enter information, make selections, filter content, or trigger actions

Decorative images inside a button also containing visible text are never read to the screen reader.

Each chip is a focusable element. If a chip has a remove icon and no other action, the entire chip and icon are one focusable element.

If a chip has a second action, like select, then the chip content and remove icon are two separate focusable elements.