Attachment — accessibility

Keyboard

  • The name is a real <button> (ghost compact Button) when onOpen is set, so Tab reaches it and Enter or Space opens the preview; without onOpen it 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".
  • busy sets disabled on every IconButton action, which removes each from the tab order (native disabled) — the name button stays reachable so the user can still open the preview while a file uploads.
  • auto renders no interactive elements at all beyond the static name text.

ARIA

  • The chip's own title attribute (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 from ds.css applies with no overrides in attachment.css.
  • busy does not move focus; a focused action that becomes disabled while 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: --fg on the chip's --surface-100 — well above AA in both themes.
  • Size .acrm-att-sz and the auto chip's static text use --fg-muted / --fg-secondary — --fg-muted is 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 auto chip'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 auto label 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 busy finished — a screen reader user has to re-focus the chip to learn an upload completed.
  • The chip's title tooltip 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