Modal
Interrupting and annotating · researchedA dialog layered over the page that asks for input or a decision and blocks the page behind it.
organism · also called Dialog, Dialog box · contains heading, button-group
Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.
Ant Design
Modal native: no antd 6.6.5- Variants
- info, success, error, warning, confirm
- Sizes
- —
- States documented
- default, loading
- Accessibility guidance
- no
Docs state it renders as div plus ARIA, not native dialog. Variants are the static methods Modal.info/success/error/warning/confirm.
1 corrected on re-read
- a11y_documented: "yes" → "no" Page read; no accessibility section or aria guidance
Carbon
Modal native: partly @carbon/react 1.117.0- Variants
- Passive, Transactional, Danger, Acknowledgment, Progress
- Sizes
- extra small, small, medium, large
- States documented
- loading
- Accessibility guidance
- yes
Source renders div role=dialog by default and a native dialog element behind the enableDialogElement feature flag. The repo also has a separate Dialog directory.
2 corrected on re-read
- states_documented: [] → ["loading"] usage.mdx Loading section: spinner/overlay or inline loading, action button disabled while loading
- a11y_documented: "unread" → "yes" modal/accessibility.mdx exists with What Carbon provides / Focus handling headings
GOV.UK
Looked at the Components index (design-system.service.gov.uk/components/), the govuk-frontend src/govuk/components directory listing, and the direct URL /components/dialog/ (404). Also /components/modal/ (404).
Material Web
Dialogs native: partly @material/web 2.5.0- Variants
- type=alert
- Sizes
- —
- States documented
- —
- Accessibility guidance
- yes
Source renders a native <dialog>; role=alertdialog when type=alert. Docs describe focus trapping (no-focus-trap opt-out).
1 corrected on re-read
- builds_on_native: "yes" → "partly" renders native <dialog>; role=alertdialog override applied when type="alert"
Primer
Dialog native: no @primer/react 38.40.1- Variants
- center, left, right, bottom, fullscreen
- Sizes
- small, medium, large, xlarge
- States documented
- —
- Accessibility guidance
- yes
Source renders divs with a role prop (dialog or alertdialog); no dialog element found in Dialog.tsx. ConfirmationDialog is a separate component. Variants listed are position options; sizes are width names.
2 corrected on re-read
- sizes: ["small","medium","large","extra large"] → ["small","medium","large","xlarge"] width: small|medium|large|xlarge in source; docs prose labels it 'Extra large'
- a11y_documented: "unread" → "yes" Read /accessibility/: Trigger Elements and Keyboard Focus, Live region usage, Built-in features
Spectrum
Standard dialog variant native: no @spectrum-web-components/button 1.12.4- Variants
- —
- Sizes
- S, M, L, XL
- States documented
- default
- Accessibility guidance
- no
Spectrum documents separate Alert dialog, Standard dialog and Takeover dialog pages. SWC sp-dialog is a div; the Overlay package it is shown through uses a native <dialog>/showModal.
1 corrected on re-read
- builds_on_native: "partly" → "no" sp-dialog sets host role=dialog over div wrappers; sp-overlay uses a div[popover][role=dialog], not <dialog> or showModal
USWDS
Modal native: no @uswds/uswds 3.14.0- Variants
- large, forced action
- Sizes
- default, large
- States documented
- —
- Accessibility guidance
- yes
Built from div elements with ARIA and a focus trap, not the native dialog element.
1 corrected on re-read
- variants: ["default","large","forced action"] → ["large","forced action"] Variants table lists only .usa-modal--lg; forced action is a data-force-action example; 'default' is not a variant
Platform facts
Anatomy
- backdrop optional — HTML ::backdrop, present for modal dialogs; APG does not name it.
- dialog container — APG: the element with role dialog; HTML: the dialog element.
- title optional — APG: the dialog has either aria-labelledby referring to a visible dialog title, or a label specified by aria-label. A visible title is one of two options, so it is not strictly required; an accessible name is.
- description optional — Optional aria-describedby content.
- body optional — Plain term; neither source names it.
- actions optional — Plain term; form method=dialog buttons are the native closing mechanism.
- close button optional — APG: strongly recommended: a visible element with role button that closes the dialog (close icon or cancel button). MDN: 'The most robust way... is to include an explicit button'.
Keys the APG binds
- When a dialog opens, focus moves to an element inside the dialog. (Generally focus is initially set on the first focusable element; APG gives alternatives for long content, irreversible actions, and informational dialogs.)
- TabMoves focus to the next tabbable element inside the dialog. If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
- Shift + TabMoves focus to the previous tabbable element inside the dialog. If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
- EscapeCloses the dialog.
- When a dialog closes, focus returns to the element that invoked the dialog unless the invoking element no longer exists or the work flow makes a different element more logical.
- It is strongly recommended that the tab sequence of all dialogs include a visible element with role button that closes the dialog, such as a close icon or cancel button.
The seven states
| default | Closed (hidden) until opened; open attribute shows it. |
|---|---|
| hover | n/a — A container; hover applies to the controls inside. |
| focus | Focus moves inside on open and returns to the invoker on close; Tab is contained in a modal. |
| active | n/a — A container with no pressed state; it is open or closed. |
| disabled | n/a — No disabled state; a dialog not shown is simply closed. |
| error | n/a — The dialog itself has none; error content belongs to forms inside it (APG has a separate alert dialog pattern). |
| loading | n/a — Not defined by APG or HTML. |
Every cell was read twice, the second time from raw sources by a separate pass. 8 of 35 fields changed on the second read — open any “corrected” note to see what it said before.