Quando una finestra di dialogo modale è aperta, gli utenti si aspettano di utilizzare controlli familiari per chiuderla: premere il tasto Esc su una tastiera, utilizzare il pulsante Indietro o il gesto sulle piattaforme mobile o un gesto di chiusura con le tecnologie per la disabilità.
Quando l'elemento <dialog> è stato introdotto per la prima volta, poteva essere chiuso con il tasto Esc, ma non con altri controlli della piattaforma, come un pulsante/gesto Indietro sui dispositivi mobili. Con l'aggiunta dell'attributo closedby per gli elementi <dialog>, il comportamento esteso di risposta a più controlli specifici della piattaforma per le richieste di chiusura è stato applicato agli elementi <dialog> aperti in uno stato modale (ovvero quando vengono aperti in modo imperativo con il metodo showModal() dell'elemento <dialog> in JavaScript o in modo dichiarativo con il comando di attivazione show-modal). Pertanto, non è necessario che gli sviluppatori apportino modifiche specifiche se utilizzano già l'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>
Quando viene aperta in uno stato modale, una finestra di dialogo senza l'attributo closedby risponde alle richieste di chiusura allo stesso modo dell'impostazione esplicita dell'attributo closedby su 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>
Se vuoi anche il comportamento "light dismiss", devi impostare closedby su 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>
Strategie di riserva
Gli elementi <dialog> aperti in uno stato modale possono già essere chiusi con Esc, quindi non è necessario alcun fallback. Non esiste un modo efficace per implementare le richieste di chiusura dai pulsanti/gesti Indietro dei dispositivi mobili, quindi è più semplice adottare questa funzionalità come potenziamento progressivo, soprattutto considerando che esistono altri modi inclusivi per chiudere la finestra di dialogo modale. Allo stesso modo, il comportamento di chiusura semplice per un elemento <dialog> che utilizza closedby="any" può essere considerato un potenziamento progressivo.