Drawer form — accessibility
Keyboard
- Tab walks head → fields → footer in reading order; the first field usually takes focus through
autoFocuson the input the screen marks. - The close control and both footer buttons are ordinary buttons: Enter and Space activate them.
- Missing: Escape does not close the drawer (
DrawerFormregisters no key handler), and there is no focus trap — the drawer is part of the page, not a modal layer. - A disabled primary button is skipped by Tab, so a form that cannot be submitted has no keyboard path to an explanation; the reason must be in a field hint.
ARIA
- Panel:
role="dialog"witharia-label= the title. It is deliberately notaria-modal, because the listing behind it stays live. - The head icon is decorative; the name comes from the title.
- Each field is a
<Field>, so the label is programmatically linked to the control and the hint is read with it. - The error sentence is plain text appended to the body — it is not a live region, so a failed save is silent for a screen reader, and it is not linked to any field.
Focus
- Foundation ring from
ds.csson the close control and the footer buttons; fields carry the input ring fromds.css. - Opening the drawer does not move focus by itself — the screen decides via
autoFocus. - Closing returns nothing: focus is left where it was, which after a click on the close control means
<body>.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- Title
.pdr-top-name--ink-900on--surface-100= 17.59:1 light, 14.53:1 dark. - Field label and hint follow
<Field>: label--labeltoken, hint--hint(400 12px) in--fg-muted= 2.85:1 light, 3.63:1 dark — below AA for text. - Error sentence
--critical-inkon--surface-100= 5.37:1 light, 5.80:1 dark — passes AA. - Primary button: white on
--accent= 4.44:1 light. - Focus ring
--accenton--surface-100= 4.44:1 light, 3.83:1 dark.
Known limits
- No Escape and no focus trap: the drawer behaves like part of the page even though it is announced as a dialog.
- The failure message is not announced and is not tied to a field.
- The
errorprop cannot carry a message, so the drawer cannot say why the save failed. - Hint text sits at 2.85:1 in light theme (system-wide
--fg-mutedlimit).
Source: docs/dialog/drawer-form.a11y.md · GitLab