Boîte de dialogue

Une boîte de dialogue modale est un type spécial de fenêtre pop-up sur une page Web: un pop-up qui interrompt l'utilisateur pour qu'il se concentre 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. Ouvrir la boîte de dialogue "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 est ouverte, le curseur 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é alors que la boîte de dialogue modale est ouvert. 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.

Il existe un attribut inert global qui peut être utilisé pour désactiver un élément et tous ses descendants, à l'exception des éléments actifs . 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.

L'arrière-plan qui masque tout ce qui n'est pas la boîte de dialogue peut être stylisé à l'aide de ::backdrop. pseudo-élément. 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é lors de l'utilisation de l'API FullScreen. C'est le cas, par exemple, lorsque vous regardez une vidéo en mode plein écran dont le format est différent de celui de l'écran ou du moniteur.

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 veiller à inclure une méthode de fermer la boîte de dialogue non modale. Ainsi, si l'élément le plus proche se trouve à l'extérieur de la boîte de dialogue, le curseur se place 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 pour 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 ses données à l'aide de la méthode dialog, l'état des données qu'il a saisies 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 permet de s'assurer il est sélectionné lorsque la boîte de dialogue est ouverte. Toutefois, si vous incluez autofocus dans un <dialog>, ne doit être fait qu'avec une grande réflexion. Tous les éléments de la séquence précédant l'élément sélectionné automatiquement sont ignorés. Nous aborderons cet attribut plus en détail dans la section phare.

L'interface HTMLDialogElement inclut un 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 s'ouvre en ajoutant l'attribut open à la place que via .show() ou .showModal(), la boîte de dialogue sera sans 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, y compris l'attribut open lors du chargement de la page, puis pour supprimer avec .close(), permet de s'assurer que la boîte de dialogue est disponible même si 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 n'est pas sélectionné. 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 qui nécessite 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".

Paramètres CSS par défaut

Notez que les navigateurs proposent un style par défaut pour dialog. Firefox, Chrome et Edge ont défini color: CanvasText; background-color: Canvas; et Safari définit color: black; background-color: white; dans leurs feuilles de style 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.

Testez vos connaissances

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