Apply one of the size modifier classes to the
ds-c-dialog element to change the dialog width.
See Storybook for React guidance of this component.
The following CSS variables can be overridden to customize Dialog components:
This component has analytics tracking available. Please see our developer documentation about using analytics in the design system.
Spaceto select the highlighted item.
Tabto move the focus sequentially through the list of focusable items.
Shift + Tabto move the focus sequentially through the list of focusable items in reversed order.
- 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
- 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
initialFocusprop with boolean prop
- 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
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets 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 ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Complete
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Complete
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete