Dev.to

Simplifique modais com os atributos experimentais "command" e "commandfor"

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 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 e Manipulação com JavaScript O elemento , introduzido no HTML5, facilitou a criação de modais ao oferecer um método nativo para lidar com diálogos. 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 diálogo é 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: Abrir modal x Conteúdo do modal 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: Abrir Modal Este é um modal. Fechar 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 Abrir modal ✖ Modal Seção do modal Lorem ipsum dolor sit amet. 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 . 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 person

Mar 5, 2025 - 18:19
 0
Simplifique modais com os atributos experimentais "command" e "commandfor"

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 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 e Manipulação com JavaScript

O elemento , introduzido no HTML5, facilitou a criação de modais ao oferecer um método nativo para lidar com diálogos. 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 diálogo é 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: 

 id="modal">
   aria-label="Fechar modal">x
  
Conteúdo do modal


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:

 command="show-modal" commandfor="modal">Abrir Modal
 id="modal">
  
Este é um modal.
   command="close" commandfor="modal">Fechar

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 


   type="button" command="show-modal" commandfor="modalDialog" aria-label="abrir modal" aria-controls="modalDialog" aria-haspopup="dialog">
    Abrir modal
  


 id="modalDialog" aria-labelledby="modalTitle" aria-modal="true">
   commandfor="modalDialog" command="close" aria-label="Fechar modal">✖
   id="modalTitle">Modal
   aria-labelledby="contentTitle">
     id="contentTitle">Seção do modal
    
Lorem ipsum dolor sit amet.