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

atom · stable · site, extension · since 2026-08

InlineMarkup

Purpose

Text with two enrichments and two only: backticks give code, double asterisks give strong, single ones give em. The criteria sheets are typed data, not Markdown, and the extension must render them offline without a parser; but accessibility documentation without code fragments is unreadable, since alt="" and no alt do not mean the same thing.

When to use, when not

Use it for a sentence from a criterion sheet or a glossary entry. Do not use it for a paragraph that needs links, headings or lists: that text should be split into fields.

Anatomy

  1. Segments of plain text.
  2. code spans on the hollow background.
  3. strong and em spans.

Props

Props of InlineMarkup
NameTypeDefaultWhat it does
textstringThe sentence, with backticks for code, double asterisks for strong, single ones for emphasis.

States

Plain text, with code, with emphasis, mixed.

code

Light
Une image décorative porte un attribut alt vide.
Dark
Une image décorative porte un attribut alt vide.
320 px, light
Une image décorative porte un attribut alt vide.
320 px, dark
Une image décorative porte un attribut alt vide.
216 px, light
Une image décorative porte un attribut alt vide.
Forced colours, captured
InlineMarkup, story code, as Chromium renders it with forced colours active

codeKeepsMarkers

Inside a code span the asterisks stay literal: a code fragment renders as it is written.

Light
Le motif **a** reste littéral dans le code.
Dark
Le motif **a** reste littéral dans le code.
320 px, light
Le motif **a** reste littéral dans le code.
320 px, dark
Le motif **a** reste littéral dans le code.
216 px, light
Le motif **a** reste littéral dans le code.
Forced colours, captured
InlineMarkup, story codeKeepsMarkers, as Chromium renders it with forced colours active

emphasis

Light
Le mot est toujours là, la couleur ne fait que confirmer.
Dark
Le mot est toujours là, la couleur ne fait que confirmer.
320 px, light
Le mot est toujours là, la couleur ne fait que confirmer.
320 px, dark
Le mot est toujours là, la couleur ne fait que confirmer.
216 px, light
Le mot est toujours là, la couleur ne fait que confirmer.
Forced colours, captured
InlineMarkup, story emphasis, as Chromium renders it with forced colours active

mixed

Light
alt="" et alt absent ne veulent pas dire la même chose.
Dark
alt="" et alt absent ne veulent pas dire la même chose.
320 px, light
alt="" et alt absent ne veulent pas dire la même chose.
320 px, dark
alt="" et alt absent ne veulent pas dire la même chose.
216 px, light
alt="" et alt absent ne veulent pas dire la même chose.
Forced colours, captured
InlineMarkup, story mixed, as Chromium renders it with forced colours active

plain

Light
Chaque image porte une alternative pertinente.
Dark
Chaque image porte une alternative pertinente.
320 px, light
Chaque image porte une alternative pertinente.
320 px, dark
Chaque image porte une alternative pertinente.
216 px, light
Chaque image porte une alternative pertinente.
Forced colours, captured
InlineMarkup, story plain, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: inline text; code, strong and em are semantic elements a screen reader can announce.
  • No HTML string is ever built: the text is split into segments and rendered by real elements.

Content rules

The two markers do not nest: inside a code span a double asterisk stays literal, which is what a code fragment needs.

Do and don’t

  • Do keep a sheet’s sentence to these two enrichments.
  • Do not add links or lists here; split the sheet instead.

Examples

<InlineMarkup text="Une image porte un attribut `alt`, et **jamais** un `title` seul." />

Surfaces

  • Site: the criteria sheets.
  • Extension: the criterion documentation in the panel, once on Svelte.

Related

Prose.

Decisions

  • 2026-08: italic was first omitted and eight passages showed bare asterisks; a format four authors get wrong is not an authors’ problem, so it is accepted and a test flags any marker left unrendered.
  • 2026-09-24: renamed from Riche, prop text; the code span is a scoped rule on the tokens.

Criteria held by construction

  • 10.7, Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
    Rendered through real elements, never an HTML string, so a criterion sheet cannot inject markup even by accident.

Tokens it reads