Quando uma caixa de diálogo modal está aberta, os usuários esperam usar controles conhecidos para dispensá-la: pressionar a tecla Esc em um teclado, usar o botão "Voltar" ou gesto em plataformas móveis ou um gesto de dispensar com tecnologias adaptativas.
Quando o elemento <dialog> foi introduzido, ele podia ser dispensado com a tecla Esc, mas não com outros controles de plataforma, como um botão/gesto de voltar em dispositivos móveis. Com a adição do atributo closedby para elementos <dialog>, o comportamento estendido de responder a mais controles específicos da plataforma para solicitações de fechamento foi aplicado a elementos <dialog> que são abertos em um estado modal (ou seja, quando abertos de forma imperativa com o método showModal() do elemento <dialog> em JavaScript ou de forma declarativa com o comando invocador show-modal). Portanto, não há nenhuma mudança específica que os desenvolvedores precisem fazer se já estiverem usando o 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 aberta em um estado modal, uma caixa de diálogo sem o atributo closedby responde a solicitações de fechamento da mesma forma que definir explicitamente o atributo closedby como 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 você também quiser o comportamento de "dispensa leve", defina closedby como 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>
Estratégias de fallback
Os elementos <dialog> abertos em um estado modal já podem ser dispensados com Esc, então não é necessário um substituto. Não há uma boa maneira de implementar solicitações de fechamento usando o botão "Voltar" ou gestos em dispositivos móveis. Por isso, é mais simples adotar esse recurso como um aprimoramento progressivo, especialmente porque há outros meios inclusivos de dispensar a caixa de diálogo modal. Da mesma forma, o comportamento de dispensar com um toque para um elemento <dialog> usando closedby="any" pode ser considerado um aprimoramento progressivo.