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

Pattern · extension

Panel shell

The frame of the extension's side panel: two live regions present from the first render, a banner for what concerns the page, a header that says how far the audit is and which page it is on, the themes with their criteria, and the keys at the foot. It has to live at 216 pixels.

The pattern, live

Largeur du panneau
57 %

RGAA Lab

Thème d’affichage, actuellement Auto
  • 1 Conforme
  • 1 Non conforme
  • 2 Non applicable
  • 3 Non testé

  • 1.1 Chaque image porteuse d’information a-t-elle une alternative textuelle ? NC Non conforme
  • 1.2 Chaque image de décoration est-elle correctement ignorée ? C Conforme
  • 1.3 L’alternative textuelle est-elle pertinente ? NT Non testé

O Oui · N Non · Échap Passer · ←→ Naviguer

How it works

  1. The two live regions come first and are empty from the first render: a status region for what happened, an alert region for what blocks. A region added later is not announced by every reader, so the shell owns them and every screen writes into them, never an aria-live of its own.
  2. A banner concerns the page, not the audit: the tab shown is not the page audited, the parameters changed since. It sits above the header, named by its word, dismissed and remembered.
  3. The header says how far the page's audit is with a labelled progress bar, then one row that wraps: the title, the theme switch, the doors. At 216 pixels a row that cannot wrap squeezes whatever will squeeze; this one folds instead.
  4. The four counts keep their abbreviation on screen and give the whole word to assistive technology; blind testers found "C / NC / NA / NT" unexplained otherwise.
  5. The page switcher is a button named by its content, the audit's name, the rank and the page, so an hour into eight pages one still knows which tab is which. The demo uses a menu; the product opens a dialog with the list.
  6. The content is a named region in the demo and the main landmark in the panel, since there the panel is the document. The themes are an accordion whose titles are headings, one criterion per row with its status chip and the action that opens the wizard.
  7. The foot lists the keys the wizards answer to; it is the one place they are written, so a screen does not have to.
  8. A wizard does not replace the shell: it mounts into a host of its own, shown while it runs, and the shell stays underneath, hidden with the attribute, so its tree, its scroll and the button that opened the wizard are there when it closes.

Rules a panel that copies it keeps

  • Everything the shell shows is the audit store's; the shell never keeps a state of its own that the store does not have.
  • Auto is the theme by default, the choice lives under the shared key, and the pre-paint script is loaded as a file, since Manifest V3 refuses an inline script.
  • A count, a chip, a bar never carry their meaning in colour alone; the word is there for the reader and the symbol for the eye.
  • Nothing in the shell is wider than the panel: a long page name is cut with an ellipsis and read in full by its button's name.
  • The status region is emptied after each announcement is read, so the same sentence can be announced twice; a message repeated verbatim in a region that still holds it says nothing.

Built with