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

organism · stable · extension · since 2026-09

EvidenceBlock

Purpose

The proof of a non-conformity: the elements at fault, each with its capture or the way to take it, the way to point at one the detection did not find, and the instruction while the pointing runs. Drawn for every non-conformity, even with nothing detected: empty, it carries the one gesture that fills it.

When to use, when not

Use it under a CriterionRow whose status is non conforme. Not for a conforming or a non-applicable criterion, and not in the wizards, which capture as they go.

Anatomy

  1. The title, which counts the elements, with the flags: missing, refused, complete.
  2. The list: per element its label, Montrer, and Capturer, Reprendre or Réessayer; the refusal’s reason; the capture.
  3. The sentence when nothing is detected.
  4. The pointing: the button, or the instruction with its keys and the way out.

Props

Props of EvidenceBlock
NameTypeDefaultWhat it does
criterionIdstringThe criterion's code, in the name of every button.
itemsEvidenceItem[]The elements at fault, detected or pointed at, and the captures kept of elements no longer detected.
picking?booleanfalseThe auditor is pointing an element in the page: the block shows the instruction and the way out.
oncapture(selector: string) => voidTakes or retakes the capture of an element.
onshow?((selector: string) => void) | undefinedShows the element in the page; without it, and without `show`, the rows have no Montrer button.
onpick?(() => void) | undefinedStarts pointing an element in the page; without it the block offers no pointing.
oncancel?(() => void) | undefinedStops pointing.
hooks?EvidenceBlockHooks | undefinedThe `data-*` attributes of the capture, pointing and cancel buttons: what a click delegate or a walk reads.
class?string''Layout classes only.
shot?Snippet<[EvidenceItem]>The capture of an item, rendered under its row when it has one.
show?Snippet<[EvidenceItem]>The consumer's own Montrer control for an item, in place of the plain button `onshow` draws.

States

Detected with the three cases, complete, empty, pointing, and as the extension draws it: its own Montrer control, its hooks, a capture in flight and a capture kept of an element no longer detected.

complete

Every element captured: the block says so, and each capture sits under its row.

Light

Éléments fautifs (2) preuves complètes

  • nav a.more
    Capture de nav a.more
    nav a.more
  • aside a
    Capture de aside a
    aside a

Dark

Éléments fautifs (2) preuves complètes

  • nav a.more
    Capture de nav a.more
    nav a.more
  • aside a
    Capture de aside a
    aside a

320 px, light

Éléments fautifs (2) preuves complètes

  • nav a.more
    Capture de nav a.more
    nav a.more
  • aside a
    Capture de aside a
    aside a

320 px, dark

Éléments fautifs (2) preuves complètes

  • nav a.more
    Capture de nav a.more
    nav a.more
  • aside a
    Capture de aside a
    aside a

216 px, light

Éléments fautifs (2) preuves complètes

  • nav a.more
    Capture de nav a.more
    nav a.more
  • aside a
    Capture de aside a
    aside a

Forced colours, captured
EvidenceBlock, story complete, as Chromium renders it with forced colours active

detected

Three elements: one captured, one without capture, one the page refused. The flags say each with a drawing and a word.

Light

Éléments fautifs (3) 1 sans capture 1 non capturable

  • img.hero
    Capture de img.hero
    img.hero
  • .carousel img:nth-child(2)
  • footer img.logo

    L'élément est hors de l'écran et la page refuse le défilement.

Dark

Éléments fautifs (3) 1 sans capture 1 non capturable

  • img.hero
    Capture de img.hero
    img.hero
  • .carousel img:nth-child(2)
  • footer img.logo

    L'élément est hors de l'écran et la page refuse le défilement.

320 px, light

Éléments fautifs (3) 1 sans capture 1 non capturable

  • img.hero
    Capture de img.hero
    img.hero
  • .carousel img:nth-child(2)
  • footer img.logo

    L'élément est hors de l'écran et la page refuse le défilement.

320 px, dark

Éléments fautifs (3) 1 sans capture 1 non capturable

  • img.hero
    Capture de img.hero
    img.hero
  • .carousel img:nth-child(2)
  • footer img.logo

    L'élément est hors de l'écran et la page refuse le défilement.

216 px, light

Éléments fautifs (3) 1 sans capture 1 non capturable

  • img.hero
    Capture de img.hero
    img.hero
  • .carousel img:nth-child(2)
  • footer img.logo

    L'élément est hors de l'écran et la page refuse le défilement.

Forced colours, captured
EvidenceBlock, story detected, as Chromium renders it with forced colours active

empty

Nothing detected: the block still exists, with the one gesture that fills it.

Light

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Dark

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

320 px, light

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

320 px, dark

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

216 px, light

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Forced colours, captured
EvidenceBlock, story empty, as Chromium renders it with forced colours active

kept

As the extension draws it: its own Montrer control, its hooks on the buttons, a capture being taken, and a capture kept of an element the detection no longer lists, with no button to retake it.

Light

Éléments fautifs (2) 1 sans capture

  • div.card
  • aside > p
    Capture de aside > p
    aside > p

Dark

Éléments fautifs (2) 1 sans capture

  • div.card
  • aside > p
    Capture de aside > p
    aside > p

320 px, light

Éléments fautifs (2) 1 sans capture

  • div.card
  • aside > p
    Capture de aside > p
    aside > p

320 px, dark

Éléments fautifs (2) 1 sans capture

  • div.card
  • aside > p
    Capture de aside > p
    aside > p

216 px, light

Éléments fautifs (2) 1 sans capture

  • div.card
  • aside > p
    Capture de aside > p
    aside > p

Forced colours, captured
EvidenceBlock, story kept, as Chromium renders it with forced colours active

picking

The auditor is pointing: the instruction with its keys, and the way out described by it.

Light

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Dans la page : survolez et cliquez l’élément. Au clavier : passez dans la page (F6 sous Chrome), puis Tab ou flèches jusqu’à l’élément, et Entrée. Échap pour annuler.

Dark

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Dans la page : survolez et cliquez l’élément. Au clavier : passez dans la page (F6 sous Chrome), puis Tab ou flèches jusqu’à l’élément, et Entrée. Échap pour annuler.

320 px, light

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Dans la page : survolez et cliquez l’élément. Au clavier : passez dans la page (F6 sous Chrome), puis Tab ou flèches jusqu’à l’élément, et Entrée. Échap pour annuler.

320 px, dark

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Dans la page : survolez et cliquez l’élément. Au clavier : passez dans la page (F6 sous Chrome), puis Tab ou flèches jusqu’à l’élément, et Entrée. Échap pour annuler.

216 px, light

Aucun élément désigné sans preuve

Une non-conformité sans capture est une affirmation. Montrez l’élément.

Dans la page : survolez et cliquez l’élément. Au clavier : passez dans la page (F6 sous Chrome), puis Tab ou flèches jusqu’à l’élément, et Entrée. Échap pour annuler.

Forced colours, captured
EvidenceBlock, story picking, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: the list is named by the title through aria-labelledby; every button names the element and the criterion; the cancel button is described by the instruction.
  • Keyboard, focus: Tab through Montrer and Capturer per element, then the pointing button; the instruction says how to reach the page (F6 under Chrome) and how to point with Tab and Entrée.
  • Live regions: none of the block’s. The panel announces a capture taken or refused.
  • The drawings are hidden; the words carry the flags.

Content rules

French. The title reads “Éléments fautifs (3)” or “Aucun élément désigné”; the flags “sans capture”, “non capturable”, “preuves complètes”; the verb follows the state: “Capturer”, “Reprendre”, “Réessayer”. The empty sentence is “Une non-conformité sans capture est une affirmation. Montrez l’élément.”.

Do and don’t

  • Do count a refused element apart from a missing one: a warning nothing can clear sends the auditor to the same wall.
  • Do keep a capture whose selector left the detected set: it is evidence the auditor took. Give it detached, and a key when two such captures share a selector.
  • Do give an item busy while its capture is taken, rather than disabling the button under the finger that pressed it.
  • Do hand a Montrer control of your own through show when it keeps a state (lit or not in the page); onshow draws a plain button.
  • Do not hide the block when nothing is detected; the auditor can see the defect and needs a way to point at it.

Examples

<EvidenceBlock criterionId={criterion.id} items={evidenceOf(result)} picking={picking === criterion.id} oncapture={capture} onshow={show} onpick={() => pick(criterion.id)} oncancel={cancelPick}>
	{#snippet shot(item)}<Screenshot {item} />{/snippet}
</EvidenceBlock>

Surfaces

  • Extension: under every non-conforming criterion of the panel.

Related

CriterionRow, Figure, Button, Kbd.

Decisions

  • 2026-09-26: the captures are a snippet, not a prop: the extension stores them as blobs in its own store, and the block has no reason to know their shape.
  • 2026-09-26: the flags are icon drawings rather than the text symbols: the block sits in the panel, where the icon set is loaded, and a drawing sizes with the icon tokens.
  • 2026-09-27: an item can be detached (a capture kept with no button, counted in the title and never as missing), busy (its capture in flight) and keyed apart from its selector; show takes the consumer’s own Montrer control; hooks carries the consumer’s data-* attributes to the capture, pointing and cancel buttons, which the extension’s delegate answers and its focus return finds after a capture or a pick. What the extension drew by hand, and the package could not, is now the package’s.

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 ?
    A missing capture, a refused one and a complete set are each a drawing and a word; the ink of the flag only confirms.
  • 11.9, Dans chaque formulaire, l'intitulé de chaque bouton est-il pertinent ?
    Every capture button names the element and the criterion, so twenty 'Capturer' buttons on the panel are twenty names.
  • 12.10, Dans chaque page web, les raccourcis clavier n'utilisant qu'une seule touche sont-ils contrôlables par l'utilisateur ?
    The keys that point an element in the page are written next to the gesture, in kbd elements, while the pointing runs.
  • 9.2, Dans chaque page web, la structure du document est-elle cohérente ?
    The elements at fault are a list named by the title that counts them.

Tokens it reads

  • Colour: --rl-c, --rl-ink, --rl-ink-soft, --rl-line, --rl-nc
  • Typography: --rl-font-mono, --rl-weight-bold, --rl-weight-regular, --rl-text-sm, --rl-text-xs
  • Spacing: --rl-space-1, --rl-space-2
  • Layout: --rl-border

Seen in patterns