Sheet modal
Interstitial for viewing large content that cannot fit inside of a modal.
Page sections
Types
Default
With utility items
With back arrow
With control bar
Without header
Usage
Behavior
The sheet modal overlays the entire screen. It should fade in smoothly with the header sliding down from the top.
Avoid content that scrolls.
Never close the modal by clicking on the background.
Visual style
Both desktop and tablet header elements follow the same spacing rules, other than adhering to breakpoint margins. Apply a gaussian blur to the background content the sheet modal sits on top of for these two breakpoints.
Accessibility
Characteristics
- Manually triggered by user
- Display additional information and may include a call to action
Keyboard/focus expectations
- Enter/Spacebar activates trigger on manually activated modals
- Focus is trapped within modal until it is closed
- All buttons in modal receive keyboard focus and operable with a keyboard alone
- Tab/Shift + Tab move focus to the next/previous focusable element
- Escape closes the dialog
- When the dialog is closed, focus returns to the trigger element
Screen reader expectations
- Announces dialog when it appears. Ex. “Web Dialog…”
- “X” close button, upper right corner, is identified as a “Close” button. Ex. “…Close Button”
- For dynamic content (e.g. Price a service) errors will be read in order of appearance within the content