Full screen dialog

How to test a full screen dialog

Gherkin Condensed

Given that I am on a screen with a full screen dialog

1 Keyboard

WHEN I use the tab key or arrow key to move focus to the launch button AND THEN use spacebar to activate the button I SEE the dialog opens
Then when I use the arrow keys I SEE content in the dialog is browsed in meaningful order and does not leave the dialog
Then when I use the tab key I SEE focus moves to interactive controls in the dialog
Or when I use the tab key to move focus to the dismiss/close button AND THEN use the spacebar to activate the dismiss/close button I SEE focus returns to the launch button

2 Android screenreader

WHEN I use a screenreader AND I swipe to focus to the launch button
- I HEAR the dialog describes its purpose or title on launch
- I HEAR it identifies itself as a dialog
- I HEAR when closed, focus returns to the launch button
- I HEAR when open, content behind the dialog remains inert
Then when I doubletap with the button in focus I HEAR the dialog opens
Then when I swipe within the dialog I HEAR focus stays trapped in the dialog
Then when I swipe to move focus to the dismiss/close button AND THEN double tap on the close button I HEAR focus returns to the launch button

3 Device settings

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

1 Keyboard actions

When I use	I see/hear
Launch button	Focus visibly moves to the open dialog itself
Arrow keys	Content within the dialog is browsed in meaningful order
Tab	Focus visibly moves to interactive controls in the dialog
Escape	If dismissible, the dialog closes and returns focus to the button that launched it
Space or enter	Any buttons are activated

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves within the dialog and doesn't enter the rest of the page
Doubletap	Activates controls

3 Screenreader output

Reads	I hear
Name	The dialog describes its purpose or title on launch
Role	It identifies itself as a dialog
Group	When closed, focus returns to the launch button
State	When open, content behind the dialog remains inert

4 Device settings

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

Usage

A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Dialogs are purposefully interruptive, so they should be used sparingly. A less disruptive alternative is to use a menu, which provides options without interrupting a user’s experience.

Should be dedicated to completing a single task
Can also display information relevant to the task

Material guidance

Material accessibility overview