organism · stable · extension · since 2026-09
WizardFrame
Purpose
The frame of a wizard screen in the extension’s panel: a region named by its title, a header with the counter and the close button, a body that scrolls, a footer that stays in sight. Every wizard writes its screen inside it.
When to use, when not
Use it for every screen of a wizard, the empty-population screen included. Not for the panel’s sidebar, which has its own shell, and not for a dialog.
Anatomy
- The header: the title as a level-2 heading, the progress “3 / 12”, the wizard’s tools (the veil switch, an inspector), the close button.
- What a wizard puts above the body: a resume banner, a jump list, a recap.
- The body, which scrolls.
- The footer: the navigation and the counters.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
title | string | The screen's title: "Audit des cadres". | |
kind? | string | The wizard's kind, written on the frame for the panel's own doors between wizards. | |
progress? | { current: number; total: number } | undefined | Where the auditor is: current element and total, shown as "3 / 12". | |
onclose? | (() => void) | undefined | Closes the wizard; the button carries the label. | |
closeLabel? | string | 'Fermer' | |
class? | string | '' | Layout classes only. |
tools? | Snippet | The header's tools, between the progress and the close button: the veil switch, an inspector. | |
above? | Snippet | What sits under the header, before the body: a resume banner, a recap. | |
children | Snippet | The screen's body, which scrolls. | |
footer? | Snippet | The footer: the navigation, the counters. |
States
Bare, with a progress and a close button, and with a footer.
bare
The region and its title, nothing else: the shape every screen starts from.
Light
Audit des cadres
Aucun cadre trouvé sur cette page.
Dark
Audit des cadres
Aucun cadre trouvé sur cette page.
320 px, light
Audit des cadres
Aucun cadre trouvé sur cette page.
320 px, dark
Audit des cadres
Aucun cadre trouvé sur cette page.
216 px, light
Audit des cadres
Aucun cadre trouvé sur cette page.
Forced colours, captured
withFooter
A footer that stays in sight while the body scrolls.
Light
Audit des liens
Élément 1 / 4
Le premier lien de la page.
Dark
Audit des liens
Élément 1 / 4
Le premier lien de la page.
320 px, light
Audit des liens
Élément 1 / 4
Le premier lien de la page.
320 px, dark
Audit des liens
Élément 1 / 4
Le premier lien de la page.
216 px, light
Audit des liens
Élément 1 / 4
Le premier lien de la page.
Forced colours, captured
withProgress
The counter says the element and the total; the close button is labelled.
Light
Audit des images
Élément 3 / 12
La troisième image de la page.
Dark
Audit des images
Élément 3 / 12
La troisième image de la page.
320 px, light
Audit des images
Élément 3 / 12
La troisième image de la page.
320 px, dark
Audit des images
Élément 3 / 12
La troisième image de la page.
216 px, light
Audit des images
Élément 3 / 12
La troisième image de la page.
Forced colours, captured
Accessibility contract
- Role and name: a
sectionnamed by its title, which is anh2withtabindex="-1"so a screen change can move the focus to it. - Keyboard, focus: the close button is a labelled button; the body scrolls with the keyboard since it holds focusable controls; the shortcuts of a wizard are the page’s, on
use:shortcuts. - Live regions: none; the panel’s shell owns them.
Content rules
French. The title names the theme audited (“Audit des cadres”, “Images”); the progress is the element’s rank over the total, never a percentage.
Do and don’t
- Do give the frame the wizard’s kind, so the panel’s doors between wizards can read it.
- Do not put the counters in the header: they belong to the footer, with the navigation they inform.
Examples
<WizardFrame title="Audit des cadres" kind="frames" progress={{ current: 3, total: 12 }} onclose={close}>
{#snippet footer()}<WizardFooter onprev={prev} onnext={next} />{/snippet}
<Question criterion="2.2">Ce titre décrit-il bien le contenu du cadre ?</Question>
</WizardFrame>Surfaces
- Extension: every wizard, as they are ported.
Related
Question, AnswerButtons, WizardFooter, CriteriaRecap, JumpList.
Decisions
- 2026-09-26: the body scrolls, not the frame. The old shells scrolled two different containers depending on the wizard, and a Oui/Non answer sent some of them back to the top at each click.
Criteria held by construction
- 9.1, Dans chaque page web, l'information est-elle structurée par l'utilisation appropriée de titres ?
The screen's title is a heading that names the region, and the outline of the panel is what the wizard shows. - 12.8, Dans chaque page web, l'ordre de tabulation est-il cohérent ?
The header comes first in the DOM and the footer last, so the tab order follows the reading order: what the screen is, its content, then its navigation.
Tokens it reads
- Colour:
--rl-bg,--rl-ink,--rl-ink-soft,--rl-line - Typography:
--rl-weight-bold,--rl-text-base,--rl-text-sm,--rl-tracking-tight - Spacing:
--rl-space-2,--rl-space-3,--rl-space-4 - Layout:
--rl-border