Examples
Dialog size variants
Apply one of the size modifier classes to the ds-c-dialog
element to change the dialog width.
.ds-c-dialog--narrow
.ds-c-dialog--wide
.ds-c-dialog--full
Code
React
Preact/React documentation for Storybook
Style customization
The following CSS variables can be overridden to customize Dialog components:
Analytics
This component has analytics tracking available. Please see our developer documentation about using analytics in the design system.
Guidance
Accessibility
Keyboard support
Enter
orSpace
to select the highlighted item.Tab
to move the focus sequentially through the list of focusable items.Shift + Tab
to move the focus sequentially through the list of focusable items in reversed order.
Focus Management
- When the modal is opened, the entire modal is the default focus state. Most screen readers will announce the entire dialog content.
- Focus is trapped within the modal and users can then navigate through the dialog actions with the keyboard.
- Escape will close the modal. To disable exiting when users press the Escape key, set the
escapeExits
prop tofalse
- When the modal closes, focus returns to the element that was focused just before the modal is activated
- To place the focus inside of the dialog on activating the modal, set the dialog focus using the
initialFocus
prop with boolean propfocusDialog
set tofalse
Learn more
- Making an accessible dialog box
- GOV.UK modal dialog boxes discussion
- Overuse of Overlays: How to Avoid Misusing Lightboxes
- Using ARIA role=dialog to implement a modal dialog box
Related patterns
Component maturity
This component meets 100% of our maturity criteria.
What does this mean?
Each component is tested against the following items to gauge the component's maturity. When using incomplete components, consider the unmet criteria as applied to your product.
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
- Complete
Color:Â Meets AA color contrast standards for accessibility and color blindness.
- Complete
Forced Colors Mode (FCM):Â While using FCM the components text is legible and improves readability.
- Complete
WCAG 2.1 Level AA Conformance:Â All Axe checks for WCAG AA compliance have passed.
- Complete
Screen readers:Â VoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.
- Complete
Keyboard navigation:Â Component is fully navigable with a keyboard.
Accessibility
- Complete
Storybook:Â Component has stories to cover all defined props.
- Complete
Responsive:Â Component designed to work in all responsive breakpoints.
- Complete
Spanish translations:Â Includes Spanish translations for default text content.
Code
- Complete
Code:Â Tokens implemented in code.
- Complete
Design:Â Tokens implemented in the Sketch.