Attachment — accessibility
Keyboard
- The name is a real
<button>(ghost compact Button) whenonOpenis set, so Tab reaches it and Enter or Space opens the preview; withoutonOpenit is a plain, non-interactive span — nothing promises an interaction that does not exist. - Every action (download, save, remove) is a real
IconButton: Tab reaches each one in order, Enter or Space activates it. Download is a real<a href>(IconButton href), so it also gets middle-click / "open in new tab" / "save link as". busysetsdisabledon everyIconButtonaction, which removes each from the tab order (nativedisabled) — the name button stays reachable so the user can still open the preview while a file uploads.autorenders no interactive elements at all beyond the static name text.
ARIA
- The chip's own
titleattribute (defaults to the file name) gives a native tooltip on hover/focus for the whole chip; it carries no ARIA role of its own — the accessible structure comes entirely from its children (a button, a link, zero or more icon buttons). - Every action button gets
aria-label="<action>: <file name>"(e.g. "Stáhnout: Smlouva_o_dílo_2026-09.pdf"), not just the bare verb — in a list of several attachments a screen reader user tabbing through icon buttons would otherwise hear "Stáhnout" repeated with no way to tell which file each one belongs to. - The name button, when present, gets the same pattern:
aria-label="<open label>: <file name>". - The type glyph (
<Icon>) is decorative; the file name text carries the meaning.
Focus
- All interactive pieces are native
<button>/<a>, so the foundation ring fromds.cssapplies with no overrides inattachment.css. busydoes not move focus; a focused action that becomesdisabledwhile busy loses its ring like any other disabled control — the surrounding chip does not trap or manage focus for this.
Contrast
Tokens shared with Item list and other components that use the same muted-text pattern (packages/ui/src/tokens/tokens.css):
- File name in
.acrm-att-static/ the ghost compact button label:--fgon the chip's--surface-100— well above AA in both themes. - Size
.acrm-att-szand theautochip's static text use--fg-muted/--fg-secondary—--fg-mutedis 2.85:1 in light theme, 3.63:1 in dark, below AA for text (the same deliberate cost as everywhere else this token is used for a secondary or tertiary read). - The
autochip's dashed border is--border-strong, a non-text boundary, not read as content. - Icon button actions inherit Icon button's own contrast figures (rest-state glyph 3.93:1 light / 6.20:1 dark — meets the non-text minimum only).
Known limits
- Size and the
autolabel sit at or below the muted-text contrast limit, same as every other secondary/tertiary text in the DS — not specific to Attachment. - No live region announces that
busyfinished — a screen reader user has to re-focus the chip to learn an upload completed. - The chip's
titletooltip is not reachable on touch, same limit as Icon button; the visible name text is the only guaranteed way to read a truncated file name on a phone.
Source: docs/attachment/attachment.a11y.md · GitLab