Lorsqu'une boîte de dialogue modale est ouverte, les utilisateurs s'attendent à pouvoir la fermer à l'aide de commandes familières : en appuyant sur la touche Esc du clavier, en utilisant le bouton Retour ou le geste de retour sur les plates-formes mobiles, ou en effectuant un geste de fermeture avec les technologies d'assistance.
Lorsque l'élément <dialog> a été introduit, il pouvait être fermé à l'aide de la touche Esc, mais pas avec d'autres commandes de la plate-forme, comme un bouton Retour ou un geste sur mobile. Avec l'ajout de l'attribut closedby pour les éléments <dialog>, le comportement étendu de réponse à davantage de commandes spécifiques à la plate-forme pour les requêtes de fermeture a été appliqué aux éléments <dialog> ouverts dans un état modal (c'est-à-dire lorsqu'ils sont ouverts de manière impérative avec la méthode showModal() de l'élément <dialog> en JavaScript ou de manière déclarative avec la commande d'appel show-modal). Les développeurs n'ont donc aucune modification spécifique à apporter s'ils utilisent déjà l'élément <dialog>.
<!-- MANDATORY: must be opened with either `showModal()` with JavaScript or the `show-modal` command using declarative command invokers in order respond to close requests including platform-specific controls. -->
<dialog aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Lorsqu'elle est ouverte dans un état modal, une boîte de dialogue sans l'attribut closedby répond aux demandes de fermeture de la même manière que si l'attribut closedby était explicitement défini sur closerequest.
<!-- This is unnecessary as it is the default behavior for modal dialogs -->
<dialog closedby="closerequest" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests.</p>
</dialog>
Si vous souhaitez également un comportement de "fermeture légère", vous devez définir closedby sur any :
<dialog closedby="any" aria-labelledby="example">
<h1 id="example">Example</h1>
<p>Modal that can be dismissed with close requests and light dismiss.</p>
</dialog>
Stratégies de remplacement
Les éléments <dialog> ouverts dans un état modal peuvent déjà être fermés avec Esc. Il n'est donc pas nécessaire de prévoir une solution de remplacement. Il n'existe pas de moyen efficace d'implémenter les demandes de fermeture à partir du bouton Retour/des gestes sur mobile. Il est donc plus simple d'adopter cette fonctionnalité comme une amélioration progressive, d'autant plus qu'il existe d'autres moyens inclusifs de fermer la boîte de dialogue modale. De même, le comportement de fermeture par clic en dehors de l'élément pour un élément <dialog> utilisant closedby="any" peut être considéré comme une amélioration progressive.