How to test
a
tooltip (rich)
Gherkin
Condensed
Given that I am on a screen with
a
tooltip (rich)
1 Keyboard
WHEN I use the tab or arrow keys to move focus to a control with a rich tooltip
I SEE focus is visually indicated on the control
Then when I use the tab or arrow keys to move focus to a control inside a rich tooltip
I SEE focus is visually indicated on the control
2
Android
screenreader
WHEN I use a screenreader
AND
I swipe to browse to a control with a rich tooltip
I HEAR
the content of the rich tooltip is announced after the control
I HEAR
the control identifies its role (ex: Button)
1 Keyboard actions
When I use
I see/hear
Arrow keys or tab
Moves focus to the control, causing the rich tooltip to display
Tab or arrow keys
Moves focus any controls in the rich tooltip
Space or enter
Activates any controls
2 Mobile screenreader gestures
When I use
I hear
Swipe
Focus moves to a control causing the rich tooltip to be announced, moves focus through the tooltip
Doubletap
Activates any controls
3 Screenreader output
Reads
I hear
Name
The content of the rich tooltip is announced after the control
Role
The control identifies its role (ex: button)
4 Device settings
When I use
I see
Text resize
Text content can resize up to 200% without losing information
Usage
Tooltips display brief labels or messages.
Use tooltips to add additional context to a button or other UI element.
Two types:
Plain
Plain tooltips briefly describe a UI element. They’re best used for labelling UI elements with no text, like icon-only buttons and fields.
Acceptance criteria
Rich
Rich tooltips provide additional context about a UI element. They can optionally contain a subhead, buttons, and hyperlinks. Rich tooltips are best used for longer text like definitions or explanations.
Material guidance