dialog contre popover : comportement modal, la couche supérieure et la fermeture légère

Ce que c'est

Deux primitives natives pour un contenu qui flotte au-dessus de la page. Un <dialog> ouvert avec showModal() est modal : il est promu dans la couche supérieure (au-dessus de tout contexte d'empilement), le reste du document devient inerte, le focus se déplace à l'intérieur, ::backdrop couvre la page, et la touche Échap émet une demande de fermeture. show() l'ouvre de façon non modale, sur place. L'attribut closedby choisit la manière dont il peut être fermé : any (un clic à l'extérieur, Échap ou du code), closerequest (Échap ou du code ; MDN indique que c'est la valeur par défaut pour showModal()) ou none. Un <form method="dialog"> ferme le dialogue à la soumission sans requête et définit returnValue avec la valeur du bouton de soumission. L'attribut popover fait de n'importe quel élément une superposition non modale de la couche supérieure, basculée par <button popovertarget="id"> sans script ; MDN décrit popover="auto" comme fermable légèrement par un clic à l'extérieur et fermé par Échap, avec un seul popover auto ouvert à la fois, tandis que manual reste ouvert jusqu'à une fermeture explicite et hint sert aux infobulles.

Pourquoi c'est important

Menus, notifications toast, infobulles et modales exigeaient auparavant une bataille de z-index, un piège à focus écrit à la main et un gestionnaire de clic extérieur. Les versions natives gèrent l'empilement, la fermeture et, pour les dialogues modaux, l'inertie, directement dans le navigateur, basculent sans JavaScript, et exposent le bon rôle aux technologies d'assistance.

Comment l'appliquer

• Invites bloquantes, confirmations, formulaires d'édition : <dialog> avec showModal(), avec autofocus sur le premier contrôle utile et un bouton de fermeture visible.
• Menus, panneaux, infobulles, notifications toast non bloquants : popover ; menus en auto, toasts en manual.
• Ne pas utiliser l'attribut open pour une modale (un dialogue ouvert ainsi est non modal) et ne pas poser tabindex sur l'élément <dialog> lui-même ; MDN avertit qu'il n'est pas interactif.
• Faire remonter les données via returnValue et l'événement close, plutôt que par un état mutable partagé.
• Styliser ::backdrop ; les deux éléments sont en display: none tant qu'ils ne sont pas affichés, si bien que les transitions d'entrée ont besoin d'un style de départ.

Pièges

La fermeture légère (closedby="any") sur un dialogue contenant un formulaire à moitié rempli jette la saisie ; préférer closerequest dans ce cas. Les popovers ne sont pas modaux : ils ne piègent pas le focus et ne rendent pas la page inerte. MDN note qu'un showModal() réussi ferme les popovers auto ouverts. Le focus ne revient à l'élément déclencheur à la fermeture que si celui-ci existe encore ; l'article sur la gestion du focus traite le reste.