Boîte de dialogue

L'élément de dialogue est un élément utile pour représenter tout type de dialogue dans HTML, découvrez son fonctionnement.

Une boîte de dialogue modale est un type spécial de pop-up sur une page Web : un pop-up qui interrompt l'utilisateur pour se concentrer sur lui-même. Il y a Quelques cas d'utilisation valides pour afficher une boîte de dialogue, mais point important à prendre en compte doit être faite avant de le faire. Les boîtes de dialogue modales obligent les utilisateurs à se concentrer sur un contenu spécifique et, temporairement, au moins ignorer le reste de la page.

Les boîtes de dialogue peuvent être modales (seul le contenu de la boîte de dialogue peut être interagi) ou non modales (il est toujours possible d'interagir) avec du contenu en dehors de la boîte de dialogue). Les boîtes de dialogue modales s'affichent au-dessus du reste du contenu de la page. Les autres de la page est inerte et, par défaut, masquée par un fond semi-transparent.

L'élément HTML <dialog> sémantique pour créer une boîte de dialogue inclut la sémantique, les interactions au clavier, ainsi que toutes les propriétés et méthodes de l'interface HTMLDialogElement.

Boîtes de dialogue modales

Voici un exemple de <dialog> modale. Ouvrez la boîte de dialogue à l'aide du bouton "Ouvrir la boîte de dialogue modale". Une fois la boîte de dialogue ouverte, vous pouvez la fermer de trois façons: en utilisant la touche Échap, en envoyant un formulaire avec Un bouton avec l'icône formmethod="dialog" (ou si method="dialog" est défini pour le formulaire lui-même), ainsi que la méthode HTMLDialogElement.close().

HTMLDialogElement comporte trois méthodes principales, ainsi que toutes les méthodes héritées de HTMLElement.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

Parce que ce <dialog> a été ouvert via HTMLDialogElement.showModal() il s'agit d'une boîte de dialogue modale. L'ouverture d'une boîte de dialogue modale désactive et masque tout ce qui n'est pas la boîte de dialogue elle-même. Si vous pointez sur l'interface utilisateur en dehors de la boîte de dialogue, vous remarquerez que tous les éléments se comportent comme si pointer-events: none;. a été défini. même le bouton qui ouvre la boîte de dialogue ne réagit pas aux interactions.

Lorsque la boîte de dialogue s'ouvre, le focus y est placé. Le curseur est placé sur le premier élément de l'ordre de navigation séquentiel du clavier dans cette boîte de dialogue. Si vous appuyez plusieurs fois sur la touche tab, vous remarquerez que seul le contenu de la boîte de dialogue peut être sélectionné lorsque la boîte de dialogue modale est ouverte. Tout ce qui se trouve en dehors de la boîte de dialogue modale est inert tant que la boîte de dialogue est ouverte.

Lorsqu'une boîte de dialogue est fermée, modale ou non, le curseur est placé sur l'élément qui a ouvert la boîte de dialogue. Si vous utilisez le programmatique ouvrir une boîte de dialogue qui n'est pas basée sur une action de l'utilisateur, reconsidérer. Si nécessaire, assurez-vous que le curseur est replacé là où il se trouvait avant l'ouverture de la boîte de dialogue. surtout si l'utilisateur ferme la boîte de dialogue sans interagir avec elle.

Un attribut inert global peut être utilisé pour désactiver un élément et tous ses descendants, à l'exception de toute boîte de dialogue active. Lorsqu'une boîte de dialogue modale est ouverte à l'aide de showModal(), l'inertie ou la désactivation sont sans frais. l'attribut n'est pas explicitement défini.

Le fond qui masque tout sauf la boîte de dialogue peut être stylisé à l'aide du pseudo-élément ::backdrop. Le fond ne s'affiche que lorsqu'un <dialog> est affiché avec la méthode .showModal(). Ce pseudo-élément correspond à tous les arrière-plans, y compris celui affiché lorsque l'API Fullscreen est utilisée, par exemple lorsque vous regardez une vidéo en mode plein écran qui n'a pas le même format que l'écran ou l'écran.

Boîtes de dialogue non modales

HTMLDialogElement.show() ouvre également une boîte de dialogue, mais sans ajouter de fond ni rendre inerte quelque chose. La touche Échap ne ferme pas les boîtes de dialogue non modales. C'est pourquoi il est encore plus important de vous assurer d'inclure une méthode permettant de fermer la boîte de dialogue non modale. Si le bouton de fermeture se trouve en dehors de la boîte de dialogue, notez que le focus sera placé sur l'élément qui a ouvert la boîte de dialogue, ce qui n'est peut-être pas la meilleure expérience utilisateur.

Bien qu'un bouton permettant de fermer la boîte de dialogue ne soit pas officiellement requis par la spécification, considérez-le comme obligatoire. Touche Échap fermera une boîte de dialogue modale, mais pas une boîte de dialogue non modale. Un bouton visible pouvant recevoir le focus améliore l'accessibilité et l'expérience utilisateur.

Fermer une boîte de dialogue

Vous n'avez pas besoin de la méthode HTMLDialogElement.close() pour fermer une boîte de dialogue. Vous n'avez pas besoin de JavaScript. Pour fermer <dialog> sans JavaScript, incluez un formulaire avec une méthode de boîte de dialogue en définissant method="dialog" sur <form> ou formmethod="dialog". sur le bouton.

Lorsqu'un utilisateur envoie des données via la méthode dialog, l'état des données saisies par l'utilisateur est conservé. En présence d'un événement d'envoi, le formulaire passe par la validation des contraintes (sauf si novalidate est défini), les données utilisateur ne sont ni effacées, ni envoyées. Un bouton de fermeture sans JavaScript peut se présenter comme suit:

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

Vous avez peut-être remarqué l'attribut autofocus défini sur la fermeture <button> dans cet exemple. Les éléments pour lesquels l'attribut autofocus est défini dans <dialog> ne recevront pas se concentrer sur le chargement de la page (sauf si celle-ci est chargée avec la boîte de dialogue visible). Toutefois, ils seront sélectionnés lorsque la boîte de dialogue sera ouverte.

Par défaut, lorsqu'une boîte de dialogue est ouverte, le premier élément sélectionnable qu'elle contient est sélectionné, sauf si un autre élément dans la boîte de dialogue possède l'attribut autofocus défini. Définir l'attribut autofocus sur le bouton de fermeture garantit qu'il reçoit la sélection lorsque la boîte de dialogue est ouverte. Toutefois, l'inclusion de autofocus dans un <dialog> ne doit être effectuée qu'après mûre réflexion. Tous les éléments de la séquence qui précèdent l'élément mis au point automatique sont ignorés. Nous en parlerons plus en détail dans la leçon ciblée.

L'interface HTMLDialogElement inclut une propriété returnValue. L'envoi d'un formulaire avec un method="dialog" définit returnValue sur le name, le cas échéant, du bouton d'envoi utilisé pour envoyez le formulaire. Si nous avions écrit <button type="submit" name="toasty">close</button>, returnValue serait toasty.

Lorsqu'une boîte de dialogue s'ouvre, l'attribut booléen open est présent, ce qui signifie que la boîte de dialogue est active et peut être utilisée. Lorsqu'une boîte de dialogue est ouverte en ajoutant l'attribut open plutôt que via .show() ou .showModal(), elle n'est pas modale. HTMLDialogElement.open renvoie true ou false, selon que la boîte de dialogue est disponible pour l'interaction, qu'elle soit modale ou non.

Bien que JavaScript soit la méthode privilégiée pour ouvrir une boîte de dialogue, l'inclusion de l'attribut open au chargement de la page, puis sa suppression avec .close(), peut aider à s'assurer que la boîte de dialogue est disponible même lorsque JavaScript ne l'est pas.

Informations supplémentaires

Ne pas utiliser tabindex

L'élément activé pour ouvrir la boîte de dialogue et le bouton de fermeture qu'elle contient (et éventuellement d'autres contenus) peuvent recevoir et qu’elles sont interactives. L'élément <dialog> n'est pas interactif et ne reçoit pas la sélection. N'ajoutez pas la propriété tabindex. à la boîte de dialogue elle-même.

Rôles ARIA

Le rôle implicite est dialog. Si la boîte de dialogue est une fenêtre de confirmation qui communique un message important nécessitant une confirmation ou une autre réponse de l'utilisateur. Définissez role="alertdialog". La boîte de dialogue doit également avoir un nom accessible. Si le nom accessible peut être indiqué avec du texte visible, ajoutez aria-labelledby="idOfLabelingText".

Valeurs par défaut CSS

Notez que les navigateurs proposent un style par défaut pour dialog. Firefox, Chrome et Edge définissent color: CanvasText; background-color: Canvas; et Safari définit color: black; background-color: white; dans leurs feuilles de style d'user-agent. Le color est hérité de dialog et non de body ou :root, ce qui peut être inattendu. La propriété background-color n'est pas héritée.

Vérifier vos connaissances

Testez vos connaissances sur l'élément dialogue.