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

organism · stable · extension · since 2026-09

ThemeList

Purpose

The themes of the grid with their criteria under them: one row per theme with its number, its name, the count of its non-conformities and of the engine’s lines, the count of what is evaluated as the button that unfolds the criteria, and the wizard’s button whose word follows the work. Everything comes in as props and goes out as callbacks; the extension’s store stays the single source.

When to use, when not

Use it as the content of the panel’s audit screen. Not for a page of the app, which reads the same criteria in tables; not for a single theme, which is one entry of the list.

Anatomy

  1. Per theme, the header: the number, the heading, the non-conformity chip, the engine chip, the folding button, the wizard button.
  2. The list of CriterionRows, hidden when folded.

Props

Props of ThemeList
NameTypeDefaultWhat it does
themesTheme[]The themes, in the referential's order, with their criteria and what the audit says of each.
open?number[][]The ids of the themes unfolded; bindable, and followed when the caller changes it.
ontoggle?((themeId: number, open: boolean) => void) | undefinedCalled when a theme is unfolded or folded.
onstatus(criterionId: string, status: ChosenStatus) => voidCalled with the criterion and the status pressed.
oncomment?((criterionId: string) => void) | undefinedOpens the note editor of a criterion; without it the rows have no note button.
onwizard?((themeId: number) => void) | undefinedOpens the theme's wizard; without it no row has a wizard button, and a theme with `wizard: false` has none either.
wizardReason?string | undefinedWhy the wizards cannot run now ("Revenez à la page auditée pour lancer ce test."): the buttons are unavailable with the sentence.
busyTheme?number | undefinedThe theme whose wizard is collecting on the page: its button says it works and keeps the focus.
criterionAction?((criterion: ThemeCriterion) => CriterionAction | undefined) | undefinedA wizard of a criterion's own, next to its theme's: 11.9 is judged button by button.
hooks?ThemeListHooks | undefinedThe `data-*` attributes of the folding and wizard buttons, the lists and the rows: what a click delegate or a walk reads.
level?2 | 3 | 43The heading level of the theme names.
class?string''Layout classes only.
detail?Snippet<[ThemeCriterion, Theme]>What the panel puts under a criterion's row: the note editor, the engine's line, the doc, the proof.

States

The grid with a started, a finished and an untouched theme; off the page; a wizard collecting; and as the extension draws it, the unfolded themes held by its store, its hooks, a theme without a wizard.

collecting

A wizard collecting on a heavy page: its button says it works and keeps the focus.

Light

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

Thématique 3,Couleurs

Dark

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

Thématique 3,Couleurs

320 px, light

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

Thématique 3,Couleurs

320 px, dark

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

Thématique 3,Couleurs

216 px, light

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

Thématique 3,Couleurs

Forced colours, captured
ThemeList, story collecting, as Chromium renders it with forced colours active

hooked

The list as the extension draws it: the unfolded themes held by a store the list follows, the hooks of its click delegate on every button, a theme without a wizard, and the criterion’s own wizard collecting.

Light

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

  • 2.1 Chaque cadre a-t-il un titre de cadre ? Posé automatiquement
  • 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? Posé automatiquement

Thématique 3,Couleurs

Dark

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

  • 2.1 Chaque cadre a-t-il un titre de cadre ? Posé automatiquement
  • 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? Posé automatiquement

Thématique 3,Couleurs

320 px, light

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

  • 2.1 Chaque cadre a-t-il un titre de cadre ? Posé automatiquement
  • 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? Posé automatiquement

Thématique 3,Couleurs

320 px, dark

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

  • 2.1 Chaque cadre a-t-il un titre de cadre ? Posé automatiquement
  • 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? Posé automatiquement

Thématique 3,Couleurs

216 px, light

Thématique 1,Images

1 critère non conforme : 1.1

Thématique 2,Cadres

  • 2.1 Chaque cadre a-t-il un titre de cadre ? Posé automatiquement
  • 2.2 Pour chaque cadre ayant un titre de cadre, ce titre de cadre est-il pertinent ? Posé automatiquement

Thématique 3,Couleurs

Forced colours, captured
ThemeList, story hooked, as Chromium renders it with forced colours active

offPage

The tab has left the audited page: every wizard button, a criterion’s own included, is unavailable and points at the reason, written once above the themes.

Light

Revenez à la page auditée pour lancer ce test.

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

Dark

Revenez à la page auditée pour lancer ce test.

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

320 px, light

Revenez à la page auditée pour lancer ce test.

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

320 px, dark

Revenez à la page auditée pour lancer ce test.

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

216 px, light

Revenez à la page auditée pour lancer ce test.

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

Forced colours, captured
ThemeList, story offPage, as Chromium renders it with forced colours active

partiel

Les deux critères ont un verdict, mais il vient d’un seul lien sur cinquante-quatre : la thématique n’est pas terminée, et la colonne annonce ce qui reste.

Light

Thématique 6,Liens

1 critère non conforme : 6.1

Thématique 1,Images

Thématique 8,Éléments obligatoires

Dark

Thématique 6,Liens

1 critère non conforme : 6.1

Thématique 1,Images

Thématique 8,Éléments obligatoires

320 px, light

Thématique 6,Liens

1 critère non conforme : 6.1

Thématique 1,Images

Thématique 8,Éléments obligatoires

320 px, dark

Thématique 6,Liens

1 critère non conforme : 6.1

Thématique 1,Images

Thématique 8,Éléments obligatoires

216 px, light

Thématique 6,Liens

1 critère non conforme : 6.1

Thématique 1,Images

Thématique 8,Éléments obligatoires

Forced colours, captured
ThemeList, story partiel, as Chromium renders it with forced colours active

themes

Three themes: one started with a non-conformity, one finished by the engine, one untouched. The first is unfolded; the wizard word follows the state of each.

Light

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

Dark

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

320 px, light

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

320 px, dark

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

216 px, light

Thématique 1,Images

1 critère non conforme : 1.1
  • 1.1 Chaque image porteuse d'information a-t-elle une alternative textuelle ?

    Trois vignettes du carrousel sans alternative.

  • 1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?
  • 1.3 Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?

Thématique 2,Cadres

Thématique 3,Couleurs

Forced colours, captured
ThemeList, story themes, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: a section per theme, its heading “Thématique 1, Images” at level; the folding button with aria-expanded and aria-controls, named by the tally and “ouvrir les critères un par un”; the wizard button named “Tester la thématique 1, Images avec l’assistant”. The engine’s count and the non-conformities’ symbol are hidden; their words are in the chip for a screen reader.
  • Keyboard, focus: Tab reaches the folding button and the wizard button of each theme, then the rows of an unfolded theme; a fold keeps the focus on its button.
  • Live regions: none of the list’s. A status change is announced by the panel.

Content rules

French. The tally reads “4 sur 9” and “Terminé” when every criterion is examined, never a check mark: examined is not passed. The wizard word is “Tester”, “Continuer” or “Revoir”. The reason for an unavailable wizard says what to do: “Revenez à la page auditée pour lancer ce test.”.

Do and don’t

  • Do give wizardReason when the tab left the audited page rather than hiding the buttons: the auditor learns why.
  • Do put what belongs under a row in detail; the list never reads the store.
  • Do pass open from the store and write it back in ontoggle when the list is mounted again and again; alone, the list keeps it itself.
  • Do hang a click delegate’s attributes through hooks (toggle, wizard, criteria, row): the wizard hook is where each theme names its own action.
  • Do give wizard: false to a theme that has no wizard rather than dropping onwizard for the whole list.
  • Do not unfold every theme at first: thirteen open lists bury the one being worked.

Examples

<ThemeList {themes} open={expanded} ontoggle={remember} onstatus={setStatus} oncomment={editNote} onwizard={openWizard} wizardReason={offPage ? 'Revenez à la page auditée pour lancer ce test.' : undefined}>
	{#snippet detail(criterion)}
		{#if criterion.status === 'NC'}<EvidenceBlock criterionId={criterion.id} items={evidenceOf(criterion)} oncapture={capture} />{/if}
	{/snippet}
</ThemeList>

Surfaces

  • Extension: the audit screen of the panel.

Related

CriterionRow, StatusToggle, PanelShell, Disclosure, Button.

Decisions

  • 2026-09-26: which themes are unfolded is the list’s own state, reported through ontoggle, as Accordion does; it is the one thing a store does not need to know to redraw the grid.
  • 2026-09-26: the folding button is not a Disclosure: its heading is not the button, since the row holds two buttons and the name of the theme must stay a plain heading.
  • 2026-09-27: open is bindable and followed, where it was seeded once: the extension’s list is mounted again at every full redraw of its panel, and the unfolded themes live in its store, so the list must reopen what the store says. hooks carries the consumer’s data-* attributes, the wizard hook naming each theme’s action; wizard: false leaves a theme without the button; the engine’s chip draws the settings icon before its figure, which alone read as a second tally, and the non-conformities’ chip keeps the codes in its tooltip, as the extension’s did.
  • 2026-09-27: the reason the wizards cannot run is written once above the themes, every wizard button disabled and pointing at it with aria-describedby: Button’s own reason, next to each, repeated one sentence thirteen times in a 216-pixel column.

Criteria held by construction

  • 9.1, Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
    Each theme is a section named by a heading at the level the panel gives, so a reader jumps from theme to theme by headings.
  • 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
    The folding button says its state with aria-expanded and names its list with aria-controls; the wizard button is a real button, unavailable with a reason or busy with the attribute.
  • 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 count of non-conformities carries the symbol and the word, the engine's count its word; the status ink only confirms.
  • 12.8, Dans chaque page web, l'ordre de tabulation est-il cohérent ?
    A folded list carries hidden: its rows leave the tab order, and Tab never lands on a criterion nobody sees.

Tokens it reads

  • Colour: --rl-action, --rl-hover, --rl-ink, --rl-ink-soft, --rl-line, --rl-line-control, --rl-nc, --rl-sunken, --rl-surface
  • Typography: --rl-weight-bold, --rl-weight-regular, --rl-text-sm, --rl-text-xs
  • Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2, --rl-space-3, --rl-space-4, --rl-space-half, --rl-control-sm, --rl-target-min
  • Layout: --rl-radius, --rl-border
  • Motion: --rl-duration-fast, --rl-ease

Seen in patterns