Cuando se abre un diálogo modal, los usuarios esperan usar controles conocidos para descartarlo: presionar la tecla Esc en un teclado, usar el botón o el gesto Atrás en plataformas móviles, o bien un gesto para descartar con tecnologías de accesibilidad.
Cuando se introdujo el elemento <dialog> por primera vez, se podía descartar con la tecla Esc, pero no con otros controles de la plataforma, como un botón o gesto de retroceso en dispositivos móviles. Con la incorporación del atributo closedby para los elementos <dialog>, se aplicó el comportamiento extendido de responder a más controles específicos de la plataforma para las solicitudes de cierre para los elementos <dialog> que se abren en un estado modal (es decir, cuando se abren de forma imperativa con el método showModal() del elemento <dialog> en JavaScript o de forma declarativa con el comando de invocador show-modal). Por lo tanto, no hay ningún cambio específico que los desarrolladores deban realizar si ya usan el elemento <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>
Cuando se abre en un estado modal, un diálogo sin el atributo closedby responde a las solicitudes de cierre de la misma manera que si se estableciera explícitamente el atributo closedby en 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 también quieres un comportamiento de “descarte rápido”, debes establecer closedby en 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>
Estrategias de resguardo
Los elementos <dialog> que se abren en un estado modal ya se pueden descartar con Esc, por lo que no es necesario un resguardo. No hay una buena manera de implementar solicitudes de cierre desde el botón Atrás o los gestos de los dispositivos móviles, por lo que es más sencillo adoptar esta función como una mejora progresiva, especialmente dado que hay otros medios inclusivos para descartar el diálogo modal. Del mismo modo, el comportamiento de descarte ligero para un elemento <dialog> que usa closedby="any" se puede considerar una mejora progresiva.