Wenn ein modales Dialogfeld geöffnet ist, erwarten Nutzer, dass sie es mit vertrauten Steuerelementen schließen können: durch Drücken der Esc auf einer Tastatur, durch Verwendung des Buttons „Zurück“ oder der Geste „Zurück“ auf Mobilgeräten oder durch eine Geste zum Schließen mit Hilfstechnologien.
Als das <dialog>-Element eingeführt wurde, konnte es mit der Esc-Taste geschlossen werden, aber nicht mit anderen Plattformsteuerelementen wie dem Button „Zurück“ oder einer Geste auf Mobilgeräten. Durch das Hinzufügen des Attributs closedby für <dialog>-Elemente wurde das erweiterte Verhalten, auf mehr plattformspezifische Steuerelemente für Schließanfragen zu reagieren, auf <dialog>-Elemente angewendet, die in einem modalen Zustand geöffnet werden (d.h. wenn sie imperativ mit der Methode showModal() des <dialog>-Elements in JavaScript oder deklarativ mit dem Aufrufbefehl show-modal geöffnet werden). Entwickler, die das <dialog>-Element bereits verwenden, müssen also nichts ändern.
<!-- 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>
Wenn ein Dialogfeld ohne das Attribut closedby in einem modalen Zustand geöffnet wird, reagiert es auf Schließanfragen genauso, als wäre das Attribut closedby explizit auf closerequest gesetzt.
<!-- 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>
Wenn Sie auch das Verhalten „Light Dismiss“ wünschen, müssen Sie closedby auf any setzen:
<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>
Fallback-Strategien
<dialog>-Elemente, die in einem modalen Zustand geöffnet werden, können bereits mit Esc geschlossen werden. Es ist also kein Fallback erforderlich. Es gibt keine gute Möglichkeit, Schließanfragen über den Button „Zurück“ oder Touchgesten auf Mobilgeräten zu implementieren. Daher ist es einfacher, diese Funktion als Progressive Verbesserung zu nutzen, insbesondere da es andere inklusive Möglichkeiten gibt, das modale Dialogfeld zu schließen. Ebenso kann das Verhalten beim Schließen durch Tippen für ein <dialog>-Element mit closedby="any" als progressive Verbesserung betrachtet werden.