StatusChip

Purpose

The status of a criterion: conforme, non conforme, non applicable, non testé. It exists to guarantee that the word is always there. Criterion 3.1 forbids information by colour alone, and that is the rule one forgets first when writing a badge by hand in a corner of a page.

When to use, when not

Use it wherever a criterion’s status is shown: a grid, a report, a column header. Do not use it for anything that is not one of the four audit statuses; a derogation, a “to recheck” mark or a level badge are other components.

Anatomy

1. The status drawing from the icon set, aria-hidden.
2. The abbreviation, in the mono face.
3. The word, visible or visually hidden when short is set.
4. A line around, solid; dashed for “non testé”, which is not a verdict.

Props

Props of StatusChip

Name	Type	Default	What it does
status	StatutDeCritere		One of the four statuses of core: C, NC, NA, NT.
short?	boolean	false	Hides the word on screen when the context already says it (a column header); it stays in the name.

States

The four statuses, and the short form.

c

Light

C Conforme

Dark

C Conforme

320 px, light

C Conforme

320 px, dark

C Conforme

216 px, light

C Conforme

Forced colours, captured

na

Light

NA Non applicable

Dark

NA Non applicable

320 px, light

NA Non applicable

320 px, dark

NA Non applicable

216 px, light

NA Non applicable

Forced colours, captured

nc

Light

NC Non conforme

Dark

NC Non conforme

320 px, light

NC Non conforme

320 px, dark

NC Non conforme

216 px, light

NC Non conforme

Forced colours, captured

nt

A dashed line and the neutral ink: not tested is not a judgement.

Light

NT Non testé

Dark

NT Non testé

320 px, light

NT Non testé

320 px, dark

NT Non testé

216 px, light

NT Non testé

Forced colours, captured

short

The word is visually hidden and stays in the accessible name.

Light

NC Non conforme

Dark

NC Non conforme

320 px, light

NC Non conforme

320 px, dark

NC Non conforme

216 px, light

NC Non conforme

Forced colours, captured

Accessibility contract

• Role and name: an inline span; the name is “C Conforme” and so on, the drawing excluded. With short, the word stays in the name.
• Keyboard, focus, live regions: none.
• The chip never wraps: a status reads in one piece or not at all.
• Labels come from @rgaa-dev/core, the same table as the extension and the reports; drawings from statusIcon.

Content rules

The four French words of the standard, never a synonym. The abbreviation is the standard’s too.

Do and don’t

• Do use short in a column header, where the word is in the header’s context anyway.
• Do not give “non testé” a colour of its own: it is an absence of verdict.

Examples

<StatusChip status="NC" />
<StatusChip status="NT" short />

Surfaces

• App: the dashboard headers, the audit page, the page view, the comparison, the report.
• Site: the method page and the gallery.

Related

ConformityRate, Icon.

Decisions

• 2026-08: the symbol for non conforme is ✕ (U+2715), from core; the extension had drifted to ✗.
• 2026-09-24: props status and short; the symbol character gives way to the icon drawing, the same shape a control shows for that status, while documents and text keep the character from core.

Criteria held by construction

• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  The abbreviation and the word are part of the component; a chip that says its status by colour alone cannot be built with it.
• 3.2, Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?
  Each status ink is measured on the page, the surface and the hollow (tokens/contrast.json).

Tokens it reads

• Colour: --rl-c, --rl-na, --rl-nc, --rl-nt
• Typography: --rl-font-mono, --rl-weight-bold, --rl-text-xs
• Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2
• Layout: --rl-radius, --rl-border