StatusBreakdown

Purpose

How the statuses of a set of criteria split, for a page of the sample or a theme: the count of compliant, non-compliant and non-applicable criteria, each with its chip, and a bar under them that shows the split at a glance.

When to use, when not

Use it wherever a set of criteria has been judged and its split matters more than one figure. Not for a single figure (Stat), not for a progress towards completion (ProgressBar), not when the statuses are all zero, where it shows nothing.

Anatomy

1. A named list of counts, one item per status that has criteria, the figure then the StatusChip.
2. A bar, hidden from assistive technology, whose segments are the same counts against the set’s total.

Props

Props of StatusBreakdown

Name	Type	Default	What it does
counts	Record<Status, number>		The count of criteria in each status.
total	number		The number the bar is drawn against: the criteria of the set, tested or not.
label	string		The list's name: "Répartition des statuts de la page".
bar?	boolean	true	Draws the bar under the counts; false keeps the counts only, for a dense row.

States

The split of a finished page, a theme in progress with untested criteria left as track, and the counts alone.

countsOnly

The counts without the bar, for a dense row such as an audit head.

Light

• 48 C Conforme
• 17 NC Non conforme
• 41 NA Non applicable

Dark

• 48 C Conforme
• 17 NC Non conforme
• 41 NA Non applicable

320 px, light

• 48 C Conforme
• 17 NC Non conforme
• 41 NA Non applicable

320 px, dark

• 48 C Conforme
• 17 NC Non conforme
• 41 NA Non applicable

216 px, light

• 48 C Conforme
• 17 NC Non conforme
• 41 NA Non applicable

Forced colours, captured

finished

A page whose 106 criteria are all judged: the bar is full.

Light

• 54 C Conforme
• 7 NC Non conforme
• 45 NA Non applicable

Dark

• 54 C Conforme
• 7 NC Non conforme
• 45 NA Non applicable

320 px, light

• 54 C Conforme
• 7 NC Non conforme
• 45 NA Non applicable

320 px, dark

• 54 C Conforme
• 7 NC Non conforme
• 45 NA Non applicable

216 px, light

• 54 C Conforme
• 7 NC Non conforme
• 45 NA Non applicable

Forced colours, captured

inProgress

A theme with criteria left untested: the track shows what is left.

Light

• 5 C Conforme
• 1 NC Non conforme

Dark

• 5 C Conforme
• 1 NC Non conforme

320 px, light

• 5 C Conforme
• 1 NC Non conforme

320 px, dark

• 5 C Conforme
• 1 NC Non conforme

216 px, light

• 5 C Conforme
• 1 NC Non conforme

Forced colours, captured

Accessibility contract

• Role and name: a list named by label; each item reads the figure then the status’s abbreviation and word. The bar is aria-hidden.
• Keyboard, focus: none.
• Live regions: none.
• Forced colours: the segments keep a border, so the bar still shows its parts.

Content rules

French. The label names the set (“Répartition des statuts de la page”, “Statuts du thème Images”). The figures are counts, never percentages; the total is the set’s criteria, tested or not, so the track shows what is left.

Do and don’t

• Do give the label the set’s name, since two breakdowns on one page must be told apart.
• Do pass the set’s total, not the sum of the counts, so untested criteria show as track.
• Do not colour the counts: the chips say the status.

Examples

<StatusBreakdown label="Répartition des statuts de la page" counts={{ C: 54, NC: 7, NA: 45 }} total={106} />

Surfaces

• App: each page of the audit’s sample, each theme of the audited page, and the audit’s own split without the bar.

Related

StatusChip, StatGroup, ProgressBar.

Decisions

• 2026-09-26: the bar is hidden rather than described: a description would repeat the list just above it, and a list read twice is noise.

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 counts with their StatusChips are the information; the bar of colours only repeats them and is hidden from assistive technology.
• 9.3, Dans chaque page web, chaque liste est-elle correctement structurée ?
  The counts are a named list, so a screen reader announces how many statuses are present and reads each figure with its status.

Tokens it reads

• Colour: --rl-c, --rl-na, --rl-nc, --rl-sunken
• Typography: --rl-text-sm
• Spacing: --rl-space-1-5, --rl-space-2, --rl-space-3
• Layout: --rl-radius, --rl-border