CriteriaRecap

Purpose

The criteria of a theme, each with its status, in one row under a wizard’s header, the current one marked and the reachable ones as buttons.

When to use, when not

Use it in a wizard, for the theme it audits. Not for a page’s list of criteria, which is a table.

Anatomy

1. A list named by the theme.
2. One pill per criterion: the drawing, the number, the hidden word; a button when reachable.

Props

Props of CriteriaRecap

Name	Type	Default	What it does
criteria	Criterion[]
current?	string | undefined		The criterion the screen is on.
reachable?	string[]	[]	The criteria the wizard can jump to; their pills are buttons.
onjump?	((id: string) => void) | undefined
label?	string	'Critères du thème'	The list's name.
class?	string	''	Layout classes only.

States

Plain pills, and pills the wizard can jump to with the current one marked.

plain

Light

• Critère 2.1, conforme
• Critère 2.2, non testé

Dark

• Critère 2.1, conforme
• Critère 2.2, non testé

320 px, light

• Critère 2.1, conforme
• Critère 2.2, non testé

320 px, dark

• Critère 2.1, conforme
• Critère 2.2, non testé

216 px, light

• Critère 2.1, conforme
• Critère 2.2, non testé

Forced colours, captured

reachable

Pills the wizard can jump to are buttons; the current one is underlined.

Light

• Aller au critère 6.1, non conforme
• Aller au critère 6.2, non applicable

Dark

• Aller au critère 6.1, non conforme
• Aller au critère 6.2, non applicable

320 px, light

• Aller au critère 6.1, non conforme
• Aller au critère 6.2, non applicable

320 px, dark

• Aller au critère 6.1, non conforme
• Aller au critère 6.2, non applicable

216 px, light

• Aller au critère 6.1, non conforme
• Aller au critère 6.2, non applicable

Forced colours, captured

Accessibility contract

• Role and name: a list named by label; a reachable pill is a button named “Aller au critère 8.4, non conforme”, the others read “Critère 8.4, conforme”; aria-current="true" on the current one.
• Keyboard, focus: the buttons in reading order; the plain pills are not stops.
• Live regions: none.

Content rules

French; the status words from @rgaa-dev/core, in lower case since they read inside the name.

Do and don’t

• Do list only the criteria the wizard judges, in the referential’s order.
• Do not make every pill a button: a control that does nothing teaches the auditor to stop pressing.

Examples

<CriteriaRecap criteria={[{ id: '2.1', status: 'C' }, { id: '2.2', status: 'NT' }]} current="2.2" reachable={['2.1']} onjump={goTo} />

Surfaces

• Extension: every wizard’s recap.

Related

StatusChip, StatusCounters, WizardFrame, JumpList.

Decisions

• 2026-09-26: the drawing comes from the icon set through statusIcon, as the chip’s does; the old recap had a fourth table of symbols with two glyphs indistinguishable to the eye.

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 pill carries the status drawing and a hidden word; the ink never says the status alone, and the current pill is underlined, not tinted.
• 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
  A pill the wizard can jump to is a real button with aria-current; a pill it cannot is plain, so nothing looks pressable and is not.

Tokens it reads

• Colour: --rl-c, --rl-hover, --rl-ink, --rl-ink-soft, --rl-line, --rl-line-control, --rl-na, --rl-nc
• Typography: --rl-font-mono, --rl-text-xs
• Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2, --rl-space-4
• Layout: --rl-radius, --rl-border