Pill — accessibility
Keyboard
- A plain pill is a
<span>: not focusable, and correctly so — it is a label, not a control. - A removable pill contains a real
button.x, so Tab reaches the remove control and Enter or Space fires it. The pill body stays inert. - There are no shortcuts; removing is a click or Enter on the
.x.
ARIA
- No role. A pill is text with a background, and that is what it should be announced as.
- The
.xneeds an explicitaria-labelnaming the thing (Odebrat VIP) — without it a screen reader hears an unnamed button, and one row of tags becomes several identical unnamed buttons. - The
.dotmarker is a::beforepseudo-element, so it contributes nothing to the accessible name; whatever it signals must also be in the words. - A leading
TablerIcon(acrm !4004) isaria-hidden="true"on the fetched SVG, same as the DS<Icon>— the glyph never enters the accessible name, so a topic pill's meaning must still be carried entirely by its label text while the SVG loads and after. - A leading icon that carries the tone (Project label) is
aria-hiddenand its colour is not announced either; the name says what the icon would. - Tone is never announced.
greenandcriticalreach a screen reader as the same plain text, so the state must be readable from the label itself — a greenVyhránoworks, a greenAnodoes not.
Focus
- The
.xtakes the foundation ring fromds.css(outline: 2px solid var(--accent); outline-offset: 1px) — verified in the browser on the removable example. - Focus ring
--accent: 4.44:1 light, 3.83:1 dark.
Contrast
Computed from packages/ui/src/tokens/tokens.css:
- Label text is
--fgon the canvas — 17.59:1 light, 14.53:1 dark. This is the main gain of the dot model: the old tinted pill put tone-coloured ink on a tone-coloured ground (4.6–7.0:1 depending on hue), whereas the text now sits at full document contrast in every tone. - The frame is
--border— 1.15:1 light, 1.22:1 dark. It is a boundary, not information; nothing depends on seeing it. - The dot uses the saturated
--ic-*set, so it is far more visible than the old ground was (which measured 1.03–1.19:1 against the canvas). It is still colour alone, which is exactly why the label text must name the thing.
Known limits
- The dot is colour alone and is never announced; the label text has to carry the meaning on its own.
- The tone carries no accessible meaning at all; the label must be self-sufficient.
11.5pxat weight 600 is small text — it passes AA on colour, but it is at the lower edge of comfortable reading, and the pill never scales with the surrounding type.
Source: docs/status/pill.a11y.md · GitLab