Dialog sheet

How to test a dialog sheet

Gherkin Condensed

Given that I am on a screen with a dialog sheet

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

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the launch button and use spacebar and/or enter key to activate the button
- I HEAR The sheet 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 modal remains inert
Then when I use the arrow keys I HEAR content in the sheet dialog is browsed in logical order and does not leave the dialog
Then when I use the tab key I HEAR focus moves to interactive controls in the sheet dialog
Then when I use the escape key I HEAR focus returns to the launch button
Or when I use the tab key to move focus to the dismiss/close button AND THEN use the spacebar or enter key to activate the dismiss/close button I HEAR focus returns to the launch button

WHEN I use a screenreader AND I swipe to focus to the launch button
- I HEAR The sheet 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 modal remains inert
Then when I doubletap with the button in focus I HEAR the dialog opens
Then when I swipe within the sheet dialog I HEAR focus stays trapped in the sheet 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

When I use	I see/hear
Launch button	Focus visibly moves to the open sheet dialog itself
Arrow keys	Content within the sheet dialog is browsed in logical order
Tab	Focus visibly moves to interactive controls in the sheet dialog, starting with the first interactive control (typically close button)
Escape	The sheet dialog closes and returns focus to the button that launched it
Space	Any buttons are activated
Enter	Any buttons or links are activated

When I use	I hear
Swipe	Focus moves within the sheet dialog and doesn't enter the rest of the page.
Doubletap	This typically activates most elements.

Reads	I hear
Name	The sheet 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 modal remains inert

A dialog sheet must meet WCAG principles:

Is keyboard operable
The close button click/tap target area is no smaller than 44x44px
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

Sheets are functionally the same as a modal dialog. The only reason there’s an entry for this is because people call it a sheet.

Related dialog sheet entries