Removable chip — accessibility

Keyboard

  • The chip itself is a <span> and is not focusable; the two controls are: the ✕ button inside each chip and the dashed Přidat button. Tab reaches them in reading order, Enter and Space activate them.
  • Removing a chip moves focus nowhere — the browser drops it to <body>. In a long set the user has to Tab back from the start.
  • There is no shortcut (Backspace on the last chip, as in Tag input) because the pattern has no field to type in.

ARIA

  • The ✕ needs an aria-label that names the value (Odebrat Praha); without it a screen reader announces only "button".
  • The row .acrm-rmchips is a plain <div>: it is not a list and is not announced as one. Under a <Field> the label of the field gives the set its name.
  • Nothing announces that a value has been removed — there is no live region.

Focus

  • Both controls are <button>, so they take the foundation ring from ds.css (outline: 2px solid var(--accent); outline-offset: 1px); §14 declares no focus style of its own.
  • The 17px ✕ is smaller than the 24px pointer-target minimum; it sits inside a 26px chip, which softens but does not fix it.

Contrast

Computed from packages/ui/src/tokens/tokens.css:

  • Chip text --ink-800 on --surface-75 = 15.74:1 light, 13.84:1 dark.
  • Chip border --border on --surface-75: hairline well below the 3:1 non-text minimum (the same limit as every hairline in the system).
  • Remove glyph --fg-muted on --surface-75 = 2.75:1 light, 3.82:1 dark — below the 3:1 non-text minimum; on hover it goes to --ink-900 on --active-surface.
  • Add chip text --fg-secondary on --bg-canvas = 3.93:1 light, 6.20:1 dark — below AA 4.5:1 for text in light theme.
  • Dashed border --border-strong on canvas = 1.38:1 light.

Known limits

  • The pattern has no product usage, so none of this is proven in a real screen — the numbers come from the CSS and the dev catalogue.
  • The remove target is 17px, under the recommended minimum.
  • Focus is lost after a removal.
  • No live region, so removals are silent for a screen reader.

Source: docs/filter/removable-chip.a11y.md · GitLab