Os modais são um padrão comum de UI utilizado para exibir informações importantes ou solicitar ações dos usuários sem que eles precisem sair da página atual. No entanto, criar modais funcionais exigia uma combinação bizarra de HTML, CSS e JavaScript.
Com a introdução dos novos atributos experimentais do elemento button, como command e commandfor, esse processo está se tornando mais declarativo e simplificado.
O que é um modal
Um modal é uma caixinha de diálogo ou janela que aparece sobre o conteúdo principal da página, interrompendo temporariamente o fluxo do usuário chamando sua atenção para uma tarefa ou mensagem específica. Modais são frequentemente utilizados para:
- Exibir alertas ou confirmações.
- Coletar entradas do usuário (por exemplo, formulários).
- Mostrar informações ou opções adicionais.
Caso você queira que o foco fique apenas no modal quando ele for aberto, procure pela estratégia de "trap focus".
Como eram criados os modais anteriormente
Antes da introdução do elemento e da API Popover, as pessoas desenvolvedoras precisavam criar soluções personalizadas para implementar modais. Isso geralmente envolvia:
Usar uma <div> com role="dialog" e atributos ARIA para acessibilidade.
Gerenciar o foco manualmente com JavaScript para garantir uma navegação adequada pelo teclado.
Adicionar event listener para detectar a teclas e cliques no fundo para fechar o modal.
Estilizar o modal e o fundo com CSS para criar o efeito de sobreposição (background backdrop).
Embora funcional, essa abordagem exigia um esforço considerável para garantir acessibilidade e compatibilidade entre navegadores.
O Elemento <dialog> e Manipulação com JavaScript
O elemento <dialog>, introduzido no HTML5, facilitou a criação de modais ao oferecer um método nativo para lidar com modais. Seus principais recursos incluem:
- Métodos embutidos como showModal(), show() e close().
- O pseudo-elemento ::backdrop para estilizar o fundo da sobreposição.
- Gerenciamento automático de foco quando o modal é aberto ou fechado. No entanto, as pessoas desenvolvedoras ainda precisavam usar JavaScript para manipular o atributo open e gerenciar interações, como abrir e fechar o modal. Por exemplo:
<button>Abrir modal</button>
<dialog id="modal">
<button aria-label="Fechar modal">x</button>
<p>Conteúdo do modal</p>
</dialog>
const modal = document.getElementById('modal');
document.querySelector('button').addEventListener('click', () => modal.showModal());
modal.querySelector('button').addEventListener('click', () => modal.close());
Embora essa abordagem tenha simplificado o processo, ainda é necessário escrever código JavaScript para garantir a funcionalidade básica.
Usando botões com os atributos experimentais command e commandfor
Os atributos command e commandfor levam o controle de modais à uma abordagem mais fluída e simples, permitindo interações declarativas. Esses atributos permitem que botões controlem diretamente elementos como dialog ou popover sem a necessidade de JavaScript adicional. Veja um exemplo:
<button command="show-modal" commandfor="modal">Abrir Modal</button>
<dialog id="modal">
<p>Este é um modal.</p>
<button command="close" commandfor="modal">Fechar</button>
</dialog>
Como funciona:
- command="show-modal": Abre o modal especificado no atributo commandfor.
- command="close": Fecha o modal especificado no atributo commandfor.
- commandfor="id": Necessário atrelar o id do modal no atributo commandfor para que os "command" funcionem.
Levando em consideração a escrita semântica de HTML, o elemento dialog aceita conteúdos de fluxo
Melhorando a acessibilidade dos botões e dialog com atributos ARIA
<main>
<button type="button" command="show-modal" commandfor="modalDialog" aria-label="abrir modal" aria-controls="modalDialog" aria-haspopup="dialog">
Abrir modal
</button>
</main>
<dialog id="modalDialog" aria-labelledby="modalTitle" aria-modal="true">
<button commandfor="modalDialog" command="close" aria-label="Fechar modal">✖</button>
<h1 id="modalTitle">Modal</h1>
<section aria-labelledby="contentTitle">
<h2 id="contentTitle">Seção do modal</h2>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</dialog>
- aria-label: Define um rótulo acessível para o botão, que será lido por leitores de tela.
- aria-controls: Indica que o botão controla ou está relacionado ao elemento com o id="modalDialog", que no caso é a
<dialog>. - aria-haspopup="dialog": Indica que o botão abre um elemento de tipo dialog (modal). Isso informa leitores de tela que um diálogo será aberto ao interagir com esse botão.
- aria-labelledby="modalTitle" (no com id="modalDialog"): Associa o modal ao título h1 com id="modalTitle", garantindo que leitores de tela leiam esse título como o nome do diálogo.
Nos casos em que um elemento interativo não tem um nome acessível, ou um nome acessível que não é preciso, e não há conteúdo visível no DOM que possa ser referenciado via aria-labelledby, o atributo aria-label pode ser usado para definir uma string que rotula o elemento interativo no qual está definido. Isso fornece ao elemento seu nome acessível. Mais sobre aria-labelledby
Atenção
Estes atributos ainda estão em fase experimental e podem sofrer alterações ao longo do desenvolvimento.
Por enquanto é possível reproduzir o exemplo nos seguintes navegadores:
- Chrome/Edge: v135
- Firefox Nightly
- Safari TP
- Chrome for Android: v135
- WebView Android: v135
Você também pode checar a lista de compatibilidade toda na seção do elemento botão, no site da MDN. Button Element
Conclusão
A evolução da criação de modais — desde soluções personalizadas até o uso do elemento e, agora, atributos experimentais como command e commandfor — demonstra flexibilidade para um desenvolvimento web mais declarativo e acessível.
Ao adotar esses novos recursos, podemos criar modais com menos código e maior manutenibilidade.
Top comments (2)
Muito legal Brunão
Obrigado, querido!