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 .x needs an explicit aria-label naming the thing (Odebrat VIP) — without it a screen reader hears an unnamed button, and one row of tags becomes several identical unnamed buttons.
  • The .dot marker is a ::before pseudo-element, so it contributes nothing to the accessible name; whatever it signals must also be in the words.
  • A leading TablerIcon (acrm !4004) is aria-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-hidden and its colour is not announced either; the name says what the icon would.
  • Tone is never announced. green and critical reach a screen reader as the same plain text, so the state must be readable from the label itself — a green Vyhráno works, a green Ano does not.

Focus

  • The .x takes the foundation ring from ds.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 --fg on 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.5px at 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