Composant · Accessibilité

DisplaySettings

Documenté

DisplaySettings propose un bloc de réglages d’affichage léger pour les préférences lecture : taille de texte, contraste, interligne et réduction des animations.

Présentation

DisplaySettings

Paramètres d'affichage

Taille de texte Contraste Interligne Animations (réduction)

Voir le code (Svelte)

<DisplaySettings
  title="Paramètres d'affichage"
  values={{"fontScale":"normal","contrast":"default","lineSpacing":"normal","reducedMotion":false}}
/>

API

Prop	Type	Par défaut	Effet
`values`	`Partial<DisplaySettingsState>`	`{ fontScale: "normal", contrast: "default", lineSpacing: "normal", reducedMotion: false }`	Valeurs initiales ou pilotées par le parent.
`onChange`	`(state: DisplaySettingsState) => void`	non défini	Callback déclenché à chaque réglage modifié.
`showFontScale`	`boolean`	`true`	Affiche le sélecteur de taille de texte.
`showContrast`	`boolean`	`true`	Affiche le sélecteur de contraste.
`showLineSpacing`	`boolean`	`true`	Affiche le sélecteur d’espacement de ligne.
`showReducedMotion`	`boolean`	`true`	Affiche le switch d’animation.

Accessibilité

Contrôles natifs (<select>, <input type="checkbox">) avec label explicite.
Comportement role="switch" sur la case motion afin de clarifier l’action.
Idempotence visuelle de la première charge : aucun style global n’est modifié directement.