Boîte de dialogue

L'élément de boîte de dialogue est utile pour représenter tout type de boîte de dialogue en HTML. Découvrez comment il fonctionne.

Une boîte de dialogue modale est un type spécial de boîte pop-up sur une page Web, qui interrompt l'utilisateur pour qu'il se concentre sur elle. Il existe des cas d'utilisation valides pour afficher une boîte de dialogue, mais vous devez y réfléchir à deux fois avant de le faire. Les boîtes de dialogue modales forcent les utilisateurs à se concentrer sur un contenu spécifique et à ignorer, au moins temporairement, le reste de la page.

Les boîtes de dialogue peuvent être modales (seul le contenu de la boîte de dialogue peut être utilisé) ou non modales (il est toujours possible d'interagir avec le 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. Le reste de la page est inerte et, par défaut, masqué par un arrière-plan semi-transparent.

L'élément HTML sémantique <dialog> permettant de créer une boîte de dialogue est fourni avec 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 modal <dialog>. Ouvrez la boîte de dialogue avec le bouton "Open modal dialog" (Ouvrir la boîte de dialogue modale). Une fois la boîte de dialogue ouverte, vous pouvez la fermer de trois manières : en appuyant sur la touche Échap, en envoyant un formulaire avec un bouton dont l'attribut formmethod="dialog" est défini (ou si l'attribut method="dialog" est défini pour le formulaire lui-même) et en utilisant 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 */

Étant donné que ce <dialog> a été ouvert avec la méthode 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 se trouve en dehors de la boîte de dialogue elle-même. Si vous pointez sur l'UI en dehors de la boîte de dialogue, vous remarquerez que tous les éléments se comportent comme si pointer-events: none; était 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 curseur est placé à l'intérieur. La sélection est placée sur le premier élément de l'ordre de navigation séquentielle au clavier dans cette boîte de dialogue. Si vous appuyez plusieurs fois sur la touche tab, 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 inerte tant que la boîte de dialogue est ouverte.

Lorsqu'une boîte de dialogue est fermée, qu'elle soit modale ou non, le curseur est replacé sur l'élément qui a ouvert la boîte de dialogue. Évitez d'ouvrir une boîte de dialogue de manière programmatique sans action de l'utilisateur. Si vous devez le faire, assurez-vous que le focus est remis à l'endroit où il se trouvait avant l'ouverture de la boîte de dialogue, en particulier si l'utilisateur la ferme 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 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 incluses. L'attribut n'est pas défini de manière explicite.

L'arrière-plan qui masque tout sauf la boîte de dialogue peut être stylisé à l'aide du pseudo-élément ::backdrop. L'arrière-plan 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 lors de l'affichage d'une vidéo en mode plein écran qui n'a pas le même format que l'écran ou le moniteur.

Boîtes de dialogue non modales

HTMLDialogElement.show() ouvre également une boîte de dialogue, mais sans ajouter de toile de fond ni rendre quoi que ce soit inerte. La touche Échap ne ferme pas les boîtes de dialogue non modales. Il est donc encore plus important d'inclure une méthode de fermeture de la boîte de dialogue non modale. Dans ce cas, si le bouton de fermeture se trouve en dehors de la boîte de dialogue, sachez que le focus sera placé sur l'élément qui a ouvert la boîte de dialogue, ce qui n'est pas forcément la meilleure expérience utilisateur.

Bien que la spécification n'exige pas officiellement un bouton pour fermer la boîte de dialogue, considérez-le comme obligatoire. La touche Échap permet de fermer une boîte de dialogue modale, mais pas une boîte de dialogue non modale. Un bouton visible qui peut être sélectionné 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 du tout 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 avec la méthode dialog, l'état des données saisies est conservé. Bien qu'il existe un événement d'envoi (le formulaire est soumis à une 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 être écrit 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 dont l'attribut autofocus est défini dans un <dialog> ne recevront pas le focus lors du chargement de la page (sauf si la page est chargée avec la boîte de dialogue visible). Toutefois, ils seront sélectionnés lorsque la boîte de dialogue s'ouvrira.

Par défaut, lorsqu'une boîte de dialogue est ouverte, le premier élément pouvant être sélectionné dans la boîte de dialogue est sélectionné, sauf si un autre élément de la boîte de dialogue a l'attribut autofocus défini. Définir l'attribut autofocus sur le bouton de fermeture permet de s'assurer qu'il est sélectionné 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 précédant l'élément sélectionné sont ignorés. Nous aborderons cet attribut plus en détail dans la leçon sur la mise au point.

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

Lorsqu'une boîte de dialogue est ouverte, l'attribut booléen open est présent, ce qui signifie que la boîte de dialogue est active et qu'il est possible d'interagir avec elle. Lorsqu'une boîte de dialogue est ouverte en ajoutant l'attribut open plutôt qu'avec .show() ou .showModal(), elle est non modale. La propriété HTMLDialogElement.open renvoie true ou false, selon que la boîte de dialogue est disponible pour l'interaction ou non, et non selon qu'elle est 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 à garantir 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 (ainsi que d'autres contenus potentiels) peuvent recevoir le focus et sont interactifs. L'élément <dialog> n'est pas interactif et ne reçoit pas le focus. 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 texte visible peut fournir le nom accessible, ajoutez aria-labelledby="idOfLabelingText".

Valeurs CSS par défaut

Notez que les navigateurs fournissent 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 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 que vous avez bien compris

Testez vos connaissances sur l'élément de boîte de dialogue.