Dialog
À quoi il sert
Dialog ouvre une boîte modale native, sans script, depuis un bouton relié par commandfor.
Quand l’utiliser
- Confirmer une action difficile à annuler, comme une suppression.
- Bloquer la page derrière jusqu’à une réponse : le reste de la page devient inerte.
Quand ne pas l’utiliser
- Pour une information non bloquante : l’afficher dans la page, sans boîte modale.
- Pour un contenu long : une page dédiée se lit mieux qu’une boîte (préférence).
Exemples
<InvokerFallback />
<button type="button" commandfor="confirm" command="show-modal">Supprimer</button>
<Dialog id="confirm" title="Supprimer le brouillon" closeLabel="Annuler">
<p>Le brouillon sera supprimé.</p>
<form slot="actions" method="dialog">
<button type="submit" value="delete">Supprimer</button>
</form>
</Dialog>Accessibilité
Clavier
- Entrée sur le déclencheur ouvre la boîte.
- Échap ferme la boîte, et le focus revient au déclencheur.
- Le focus initial va au premier élément focalisable, choisi par le navigateur.
Lecteur d’écran
- La boîte est nommée par son titre, relié par aria-labelledby.
- Le bouton de fermeture porte le libellé closeLabel.
- Le rôle dialog est implicite : le composant n’ajoute ni rôle ni aria-modal.
Garanti par le composant
- Élément dialog natif, ouvert par show-modal sans script.
- closedby="any" : un clic hors de la boîte la ferme.
- Aucun autofocus et aucun attribut style.
À la charge de l’intégrateur
- Fournir un closeLabel traduit et un title précis.
- Poser InvokerFallback une fois par page pour les navigateurs sans Invoker Commands.
- Donner au déclencheur un nom visible : le composant ne le crée pas.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Identifiant du `<dialog>`, visé par `commandfor` sur le déclencheur. |
| title (obligatoire) | string | — | Titre visible, rendu en `<h2>` et nom accessible (`aria-labelledby`). |
| closeLabel (obligatoire) | string | — | Libellé visible du bouton de fermeture, fourni par le site (traduit). |
Jetons utilisés
--pp-color-control--pp-color-fg--pp-color-line--pp-color-surface--pp-duration-base--pp-easing-standard--pp-font-size-2--pp-radius-control--pp-radius-surface--pp-size-control-height--pp-size-measure--pp-size-rule--pp-size-target-min--pp-space-m--pp-space-s
Preuves et décisions
- WCAG 2.1.2 Pas de piège au clavier
- WCAG 4.1.2 Nom, rôle, valeur
- Tests : packages/astro/test/Dialog.test.ts
- Tests e2e : apps/docs/e2e/dialog.spec.ts