# Dialog

Une courte question au milieu de l'écran, avant une action à fort effet ou sans possibilité de retour. Elle se ferme uniquement avec une réponse.

## Playground

```html
<button class="feitio-button" type="button" data-open-dialog="pg-dialog">Mettre en pause</button><dialog class="feitio-dialog" id="pg-dialog" aria-labelledby="pg-dialog-t" aria-describedby="pg-dialog-d"><form method="dialog"><h2 id="pg-dialog-t">Mettre en pause les 12 rappels ?</h2><div id="pg-dialog-d"><p>Vous pouvez les réactiver dans Réglages.</p></div><div class="actions"><button type="submit" class="feitio-button" data-variant="primary" value="yes">Mettre en pause</button><button type="submit" class="feitio-button" value="cancel" autofocus>Annuler</button></div></form></dialog>
```

## Quand l'utiliser

-   Avant de supprimer, d'annuler, de mettre en pause tout, de partir sans sauvegarder.
-   À partir de la page de détails de l'élément, là où réside l'action.

## Quand ne pas l'utiliser

-   **Qu'est-ce qui peut être annulé :** faites-le avec le StatusOverlay et un Notice.
-   **Aide, actualité ou promotion :** jamais.
-   **Un formulaire :** c'est une page, ou un Drawer s'il est court.
-   **Un Dialog ouvrant un autre :** jamais.

## Exemples

### Action sans possibilité de retour

L'action est irréversible, et la dernière ligne indique qu'elle ne peut pas être annulée. Le focus se place sur Annuler.

Afficher le code

```html
<button type="button" class="feitio-button" data-variant="danger" data-open-dialog="apagar">Apagar</button>
<dialog class="feitio-dialog" id="apagar" aria-labelledby="apagar-t" aria-describedby="apagar-d">
  <form method="dialog">
    <h2 id="apagar-t">Apagar o agendamento "Backup semanal"?</h2>
    <ul id="apagar-d"><li>…</li><li>Não dá para desfazer.</li></ul>
    <div class="actions">
      <button type="submit" class="feitio-button" data-variant="danger" value="apagar">Apagar agendamento</button>
      <button type="submit" class="feitio-button" value="cancelar" autofocus>Cancelar</button>
    </div>
  </form>
</dialog>
```

### Tapez pour confirmer

Uniquement pour ce qui supprime beaucoup d'un coup : le bouton danger s'allume uniquement avec le bon mot, et le focus commence dans le champ.

Afficher le code

```html
<form method="dialog" data-type-to-confirm="APAGAR">
  …
  <input class="feitio-input" id="confirmar" autocomplete="off">
  <button type="submit" class="feitio-button" data-variant="danger" disabled>Apagar 12 agendamentos</button>
</form>
```

## Anatomie

1.  **La question :** l'action, le nom de la chose et sa taille.
2.  **Ce qui se passe**, et s'il y a un moyen de revenir en arrière.
3.  **L'action :** verbe et objet ; vin quand elle détruit.
4.  **Annuler :** prend le focus sur l'ouvert.

## États

-   **Ouverture :** arrive comme un papier posé, au milieu de l'écran, et l'arrière-plan s'assombre.
-   **Ouvert :** le reste de l'écran ne prend ni touches ni focus ; une touche en dehors ne le ferme pas.
-   **Répondu :** il se ferme, le focus retourne à l'opener, et la rétroaction montre sur le conteneur.

## Faire et ne pas faire

Do

## Supprimer « Sauvegarde » ?

Supplémenter calendrierAnnuler

La question et le bouton disent la même chose.

Don’t

## Êtes-vous sûr ?

OuiNon

« Êtes-vous sûr ? » avec Oui et Non : il ne dit pas quoi.

## Accessibilité

-   Le navigateur `<dialog>` avec `showModal()` : piège le focus, ferme avec Esc et retourne le focus.
-   Nom et description : `aria-labelledby` et `aria-describedby`.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-dialog"`

sur le `<dialog>`

Papier soulevé, au centre de l'écran.

`data-open-dialog`

l'identifiant

Sur le bouton d'ouverture.

`method="dialog"`

sur le formulaire interne

Les réponses ferment le Dialog.

`data-type-to-confirm`

le mot

Le bouton de danger ne s'allume que avec lui.

`autofocus`

sur Annuler

L'accent commence sur la réponse qui ne fait rien.