StatusCounters

Purpose

How many criteria of a theme stand in each status, as four figures with their words, in a wizard’s foot.

When to use, when not

Use it in a wizard’s footer, next to the navigation. Not for a page’s summary bar, which is StatusBreakdown, and not for one status, which is StatusChip.

Anatomy

1. A list named by what it counts.
2. Four items: the figure and the word, conformes, non conformes, non applicables, non testés.

Props

Props of StatusCounters

Name	Type	Default	What it does
counts	Record<StatutDeCritere, number>
label?	string	'Statuts des critères'	What the counts are of, for the group's name: "les critères du thème".
class?	string	''	Layout classes only.

States

A theme in progress, and a theme finished with nothing non-conforming.

finished

Zero is written: a theme with nothing non-conforming says so.

Light

• 4 Conforme
• 0 Non conforme
• 2 Non applicable
• 0 Non testé

Dark

• 4 Conforme
• 0 Non conforme
• 2 Non applicable
• 0 Non testé

320 px, light

• 4 Conforme
• 0 Non conforme
• 2 Non applicable
• 0 Non testé

320 px, dark

• 4 Conforme
• 0 Non conforme
• 2 Non applicable
• 0 Non testé

216 px, light

• 4 Conforme
• 0 Non conforme
• 2 Non applicable
• 0 Non testé

Forced colours, captured

inProgress

Light

• 3 Conforme
• 1 Non conforme
• 0 Non applicable
• 2 Non testé

Dark

• 3 Conforme
• 1 Non conforme
• 0 Non applicable
• 2 Non testé

320 px, light

• 3 Conforme
• 1 Non conforme
• 0 Non applicable
• 2 Non testé

320 px, dark

• 3 Conforme
• 1 Non conforme
• 0 Non applicable
• 2 Non testé

216 px, light

• 3 Conforme
• 1 Non conforme
• 0 Non applicable
• 2 Non testé

Forced colours, captured

Accessibility contract

• Role and name: a list named by label; each item reads “3 conformes”.
• Keyboard, focus: none, it is text.
• Live regions: none; the counts change with an answer, and the answer button’s state says it.

Content rules

French, the words of @rgaa-dev/core. Zero is written.

Do and don’t

• Do give the label the theme’s name when several themes are on screen.
• Do not hide a zero: a theme with no non-conformity says so.

Examples

<StatusCounters counts={{ C: 3, NC: 1, NA: 0, NT: 2 }} label="Critères du thème Cadres" />

Surfaces

• Extension: every inventory wizard’s foot.

Related

StatusChip, WizardFooter, StatusBreakdown.

Decisions

• 2026-09-26: the words come from core’s table, as the chip’s do; the old strip had its own copies.

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 ?
  Each count carries its word; the status ink on the figure never carries alone.

Tokens it reads

• Colour: --rl-c, --rl-ink, --rl-ink-soft, --rl-na, --rl-nc
• Typography: --rl-weight-bold, --rl-text-xs
• Spacing: --rl-space-1, --rl-space-2, --rl-space-3