Skip to content
design system
Thème d’affichage, actuellement Auto

molecule · stable · extension · since 2026-09

AutoVerdict

Purpose

A verdict the tool concluded itself: the status, who said it, what it saw, and the reminder that the auditor’s answer wins.

When to use, when not

Use it above the answer buttons when the engine or the page’s markup already settled a criterion, or in place of the buttons when the criterion is the sum of answers the auditor gave elsewhere, element by element on a walk. Not for the auditor’s answer to the question on screen, which the buttons show.

Anatomy

  1. The verdict line: the drawing, the status in bold, the source.
  2. The findings, one per line, with a “Montrer” button when the element can be shown.
  3. The closing sentence, or what the wizard says instead.

Props

Props of AutoVerdict
NameTypeDefaultWhat it does
statusStatutDeCritere
source?'engine' | 'page' | 'auditor''engine'Who concluded: the detection engine, the page's own markup, or the auditor's own answers summed elsewhere, as a criterion concluded element by element on a walk.
findings?Finding[][]
onshow?((selector: string) => void) | undefinedCalled with the selector of the finding whose "Montrer" was pressed.
class?string''Layout classes only.
children?SnippetWhat replaces the closing sentence, when the wizard has something else to say.

States

Conforming from the page, non-conforming from the engine with findings, not applicable with a sentence of the wizard’s, and non-conforming from the auditor’s own answers with the sentence that says where to change them.

fromAuditor

The criterion is the sum of answers given element by element elsewhere; the sentence says where to change them.

Light

Non conforme, d’après vos réponses

Ce critère se conclut composant par composant, dans le parcours. Revenez-y pour le modifier.

Dark

Non conforme, d’après vos réponses

Ce critère se conclut composant par composant, dans le parcours. Revenez-y pour le modifier.

320 px, light

Non conforme, d’après vos réponses

Ce critère se conclut composant par composant, dans le parcours. Revenez-y pour le modifier.

320 px, dark

Non conforme, d’après vos réponses

Ce critère se conclut composant par composant, dans le parcours. Revenez-y pour le modifier.

216 px, light

Non conforme, d’après vos réponses

Ce critère se conclut composant par composant, dans le parcours. Revenez-y pour le modifier.

Forced colours, captured
AutoVerdict, story fromAuditor, as Chromium renders it with forced colours active

fromEngine

The engine found two elements; each has a Montrer button with the selector as data.

Light

Non conforme, d’après le moteur de détection

  • Le champ n’a pas d’étiquette.
  • L’étiquette est vide.

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

Dark

Non conforme, d’après le moteur de détection

  • Le champ n’a pas d’étiquette.
  • L’étiquette est vide.

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

320 px, light

Non conforme, d’après le moteur de détection

  • Le champ n’a pas d’étiquette.
  • L’étiquette est vide.

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

320 px, dark

Non conforme, d’après le moteur de détection

  • Le champ n’a pas d’étiquette.
  • L’étiquette est vide.

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

216 px, light

Non conforme, d’après le moteur de détection

  • Le champ n’a pas d’étiquette.
  • L’étiquette est vide.

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

Forced colours, captured
AutoVerdict, story fromEngine, as Chromium renders it with forced colours active

fromPage

The page settled it: a title attribute is there. No finding to show.

Light

Conforme, d’après la page

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

Dark

Conforme, d’après la page

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

320 px, light

Conforme, d’après la page

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

320 px, dark

Conforme, d’après la page

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

216 px, light

Conforme, d’après la page

Vous pouvez le confirmer ou le corriger : la réponse que vous donnez l’emporte.

Forced colours, captured
AutoVerdict, story fromPage, as Chromium renders it with forced colours active

ownSentence

The wizard replaces the closing sentence with its own.

Light

Non applicable, d’après la page

Le critère 2.2 ne porte que sur les cadres ayant un titre.

Dark

Non applicable, d’après la page

Le critère 2.2 ne porte que sur les cadres ayant un titre.

320 px, light

Non applicable, d’après la page

Le critère 2.2 ne porte que sur les cadres ayant un titre.

320 px, dark

Non applicable, d’après la page

Le critère 2.2 ne porte que sur les cadres ayant un titre.

216 px, light

Non applicable, d’après la page

Le critère 2.2 ne porte que sur les cadres ayant un titre.

Forced colours, captured
AutoVerdict, story ownSentence, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: a block of text; “Montrer” buttons named by their word, with the selector as data.
  • Keyboard, focus: the buttons only.
  • Live regions: none; the block is part of the screen.

Content rules

French. The status word from @rgaa-dev/core; the source is “d’après le moteur de détection”, “d’après la page” or “d’après vos réponses”; a finding is a reason in words, the selector never printed. With the auditor as source, the closing sentence must say where the answers are changed, since the reminder that the answer wins would point at buttons that are not there.

Do and don’t

  • Do keep the selector in the button: a ten-level path printed drowned the reason.
  • Do not present the verdict as final; the closing sentence says the auditor’s answer wins.

Examples

<AutoVerdict status="NC" findings={[{ selector: 'form input[name=q]', reason: 'Le champ n’a pas d’étiquette.' }]} onshow={show} />

Surfaces

  • Extension: the wizards, when a criterion was settled before the auditor.

Related

Question, StatusChip, AnswerButtons.

Decisions

  • 2026-09-26: the findings are the engine’s own text, split into reason and selector by the wizard; the component prints the reason and keeps the selector for the button.
  • 2026-09-26: a third source, the auditor. The script wizard concludes 7.1 and 7.3 from the checks answered component by component, and its questions screen shows them read-only; “d’après la page” was false there, and a local block would have been a second implementation of this one.

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 status is the word in bold; the line and the drawing's ink confirm it and never carry it alone.
  • 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
    Showing the element is a real button, with the selector as data, not a link to nowhere.

Tokens it reads

  • Colour: --rl-action, --rl-c, --rl-ink, --rl-ink-soft, --rl-line-strong, --rl-na, --rl-nc, --rl-sunken
  • Typography: --rl-weight-bold, --rl-text-sm, --rl-text-xs
  • Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2, --rl-space-3, --rl-space-5
  • Layout: --rl-radius, --rl-border