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 dashedPřidatbutton. 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 anaria-labelthat names the value (Odebrat Praha); without it a screen reader announces only "button". - The row
.acrm-rmchipsis 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 fromds.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-800on--surface-75= 15.74:1 light, 13.84:1 dark. - Chip border
--borderon--surface-75: hairline well below the 3:1 non-text minimum (the same limit as every hairline in the system). - Remove glyph
--fg-mutedon--surface-75= 2.75:1 light, 3.82:1 dark — below the 3:1 non-text minimum; on hover it goes to--ink-900on--active-surface. - Add chip text
--fg-secondaryon--bg-canvas= 3.93:1 light, 6.20:1 dark — below AA 4.5:1 for text in light theme. - Dashed border
--border-strongon 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