CriterionRow

Purpose

One criterion of the grid, judged in place: the code and the title, the statuses in a named group, the note button, the wizard of its own when it has one, the comment, and under all that whatever the panel adds. The row keeps no state; the extension is the consumer and writes through the store.

When to use, when not

Use it inside ThemeList, or in any list of criteria judged one by one. Not for a criterion displayed without being judged (a table row with a StatusChip), and not for a wizard’s question.

Anatomy

1. The info: the code, the title, the engine chip when the engine wrote the status.
2. The actions: StatusToggle, the note button, the criterion’s own wizard.
3. The comment.
4. The children: the note editor, the engine’s line, the doc, the proof.

Props

Props of CriterionRow

Name	Type	Default	What it does
id	string		The criterion's code: "1.1".
title	string		The criterion's title, as the referential writes it.
status?	StatutDeCritere | undefined		The status given; absent reads as non testé.
onstatus	(status: ChosenStatus) => void		Called with the status pressed.
comment?	string | undefined		The auditor's comment, shown under the controls.
oncomment?	(() => void) | undefined		Opens the note editor; the button appears when given, named for adding or editing.
engine?	boolean	false	The status was written by the engine: the row says so with a word, and the panel adds the engine's line under it.
action?	CriterionAction | undefined		A wizard of the criterion's own, next to its theme's: "Tester les boutons" for 11.9.
hooks?	CriterionRowHooks | undefined		The `data-*` attributes of the row and its buttons: what a click delegate or a walk reads.
class?	string	''	Layout classes only.
children?	Snippet		What the panel puts under the row: the note editor, the engine's line, the doc, the proof.

States

Untested, judged with a comment, written by the engine with a wizard of its own, and carrying a consumer’s hooks with its wizard collecting.

engine

A status the engine wrote: the row says so with a word, and the panel adds the engine line under it. The criterion has a wizard of its own.

Light

• 11.9 Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ? Posé automatiquement
  C NC NA

  Tester les boutons, critère 11.9

  Le moteur a trouvé deux boutons sans intitulé.

Dark

• 11.9 Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ? Posé automatiquement
  C NC NA

  Tester les boutons, critère 11.9

  Le moteur a trouvé deux boutons sans intitulé.

320 px, light

• 11.9 Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ? Posé automatiquement
  C NC NA

  Tester les boutons, critère 11.9

  Le moteur a trouvé deux boutons sans intitulé.

320 px, dark

• 11.9 Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ? Posé automatiquement
  C NC NA

  Tester les boutons, critère 11.9

  Le moteur a trouvé deux boutons sans intitulé.

216 px, light

• 11.9 Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ? Posé automatiquement
  C NC NA

  Tester les boutons, critère 11.9

  Le moteur a trouvé deux boutons sans intitulé.

Forced colours, captured

hooked

The row as the extension draws it: its hooks on the row, the statuses, the note and the wizard, which is collecting on the page and says so.

Light

• 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?
  C NC NA

  Ajouter une note, critère 11.9 Tester les boutons, critère 11.9

Dark

• 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?
  C NC NA

  Ajouter une note, critère 11.9 Tester les boutons, critère 11.9

320 px, light

• 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?
  C NC NA

  Ajouter une note, critère 11.9 Tester les boutons, critère 11.9

320 px, dark

• 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?
  C NC NA

  Ajouter une note, critère 11.9 Tester les boutons, critère 11.9

216 px, light

• 11.9 Dans chaque formulaire, l’intitulé de chaque bouton est-il pertinent ?
  C NC NA

  Ajouter une note, critère 11.9 Tester les boutons, critère 11.9

Forced colours, captured

judged

Non conforme with a comment under the controls; the note button says it edits.

Light

• 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é ?
  C NC NA

  Modifier la note, critère 3.2

  Le gris des légendes (#8a8a8a sur blanc) mesure 3,1:1.

Dark

• 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é ?
  C NC NA

  Modifier la note, critère 3.2

  Le gris des légendes (#8a8a8a sur blanc) mesure 3,1:1.

320 px, light

• 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é ?
  C NC NA

  Modifier la note, critère 3.2

  Le gris des légendes (#8a8a8a sur blanc) mesure 3,1:1.

320 px, dark

• 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é ?
  C NC NA

  Modifier la note, critère 3.2

  Le gris des légendes (#8a8a8a sur blanc) mesure 3,1:1.

216 px, light

• 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é ?
  C NC NA

  Modifier la note, critère 3.2

  Le gris des légendes (#8a8a8a sur blanc) mesure 3,1:1.

Forced colours, captured

untested

Nothing judged yet: the code, the title, the three statuses and the note button, which says it adds.

Light

• 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?
  C NC NA

  Ajouter une note, critère 1.1

Dark

• 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?
  C NC NA

  Ajouter une note, critère 1.1

320 px, light

• 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?
  C NC NA

  Ajouter une note, critère 1.1

320 px, dark

• 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?
  C NC NA

  Ajouter une note, critère 1.1

216 px, light

• 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?
  C NC NA

  Ajouter une note, critère 1.1

Forced colours, captured

Accessibility contract

• Role and name: an li, so the parent is a list; inside, the StatusToggle group named for the criterion and buttons whose names carry the criterion’s code.
• Keyboard, focus: Tab through the statuses, the note, the wizard; a status pressed keeps the focus, since the row redraws in place.
• Live regions: none of the row’s. The panel announces a status change through its own region.

Content rules

French. The title is the referential’s, verbatim; the note button reads “Ajouter une note” or “Modifier la note”, and its name adds the criterion’s code; the engine chip reads “Posé automatiquement”.

Do and don’t

• Do give oncomment only where a note can be written; without it there is no note button.
• Do put the note editor in the children, under the row, so the focus moves from the button to the field and back.
• Do not put the proof in the row for a conforming criterion; EvidenceBlock is for a non-conformity.
• Do hang a click delegate’s attributes through hooks (row, status, note, action), never by wrapping the row: the focus return of a delegate finds the very button it marked.

Examples

<CriterionRow id={criterion.id} title={criterion.title} status={result?.status} onstatus={(s) => setStatus(criterion.id, s)} comment={result?.comment} oncomment={() => edit(criterion.id)}>
	{#if result?.status === 'NC'}<EvidenceBlock criterionId={criterion.id} {items} oncapture={capture} />{/if}
</CriterionRow>

Surfaces

• Extension: the rows of every theme of the panel.

Related

StatusToggle, ThemeList, EvidenceBlock, Button, Chip.

Decisions

• 2026-09-26: the engine’s origin is a chip with a word, not a data attribute alone: the extension’s row said it with data-origine and the eye had nothing.
• 2026-09-26: the row is an li and nothing else; a caller that has no list gives it one.
• 2026-09-27: hooks carries the consumer’s data-* attributes to the row, the statuses, the note and the wizard, and action takes busy: the extension’s delegate answers set-status and edit-comment, returns the focus to them after a write, and its walks read data-criterion-row; the package names none of them.
• 2026-09-27: action takes reason (unavailable with its sentence) or describedBy (unavailable, pointing at a sentence the screen says once, which ThemeList sets from its own reason). 11.9’s wizard ran off the audited page and wrote another page’s buttons under it.

Criteria held by construction

• 9.2, Dans chaque page web, la structure du document est-elle cohérente ?
  A list item in the theme's list: the criteria of a theme are a list, and a reader counts them.
• 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
  Every button of the row says the criterion in its name: the note, the statuses, the wizard of its own.
• 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 ?
  An engine-written status is told by a word in a chip, never by a tint on the row.

Tokens it reads

• Colour: --rl-action, --rl-ink-soft, --rl-line
• Typography: --rl-weight-bold, --rl-text-xs, --rl-leading-body, --rl-leading-snug, --rl-measure-stat
• Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2, --rl-space-4
• Layout: --rl-border

Seen in patterns

• Panel shell