Invocadores de interesse e atributo Command

O grupo Open UI está padronizando dois novos atributos HTML — command para ações acionadas por clique e interesttarget para o "interesse" acionado ao passar o mouse ou receber foco (a base de dicas de ferramentas e prévias). Ambos ampliam o HTML com comportamentos declarativos que tradicionalmente exigiam JavaScript.

Um botão com command="show-modal" e commandfor="dialog-id" exibe um diálogo sem nenhum JS — substituindo chamadas manuais a dialog.showModal(). Outros comandos: command="close", command="toggle-popover", command="show-popover".

O conjunto inicial é voltado a padrões comuns de interface do usuário: exibir e ocultar diálogos (com o elemento integrado <dialog>), alternar janelas sobrepostas (a API de janelas sobrepostas) e possivelmente crescerá com o tempo. Elementos personalizados podem declarar quais comandos aceitam por meio de manipuladores de eventos oncommand.

Além dos comandos integrados, a especificação permite sequências de comandos personalizadas iniciadas por "--". O elemento-alvo recebe um evento command que você pode tratar em JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

O atributo interesttarget marca o alvo de "interesse" de um elemento — normalmente, uma dica de ferramenta que aparece quando o usuário passa o mouse ou posiciona o foco. O navegador gerencia automaticamente o tempo (um atraso de 300 ms para detectar a intenção de passar o mouse), o posicionamento (com posicionamento por âncora) e o encerramento.

O modo de janela sobreposta de dica foi criado para janelas sobrepostas no estilo de dicas de ferramentas que aparecem quando há interesse. Elas não são modais, não roubam o foco e são fechadas quando o interesse desaparece. A combinação do alvo de interesse com o modo de dica fornece uma dica de ferramenta nativa usando apenas dois atributos HTML.

Os diálogos nativos mantêm o foco dentro deles; as janelas sobrepostas nativas gerenciam o empilhamento; e os acionadores nativos de interesse gerenciam o tempo de intenção de passar o mouse e anunciam as relações aos leitores de tela. Substituir implementações personalizadas em JS por essas primitivas declarativas melhora de forma confiável a qualidade da acessibilidade.

Esses recursos ainda estão sendo padronizados. Os nomes exatos dos atributos e o conjunto de comandos podem mudar. As implementações nos navegadores estão surgindo primeiro no Chromium. O uso em produção deve aguardar até que a nomenclatura se estabilize e pelo menos dois navegadores ofereçam suporte — provavelmente no próximo ano ou nos dois seguintes.

Cada um desses recursos substitui JavaScript que foi escrito e reescrito milhões de vezes: gerenciamento de diálogos, acionadores de janelas sobrepostas e comportamento de dicas de ferramentas. Transferir esses padrões para o HTML reduz o peso da página, melhora a consistência e permite que o navegador aplique otimizações.

O grupo comunitário Open UI (open-ui.org) conduz grande parte desse trabalho — propondo, criando protótipos e conduzindo novos elementos e atributos HTML pelo processo de padronização. Acompanhe o blog deles para conhecer as propostas mais recentes.

Comandos, alvos de interesse, janelas sobrepostas, diálogos, posicionamento por âncoras, transições de visualização e listas de seleção personalizáveis fazem parte de um único esforço coerente para trazer padrões de bibliotecas de componentes para a plataforma. Cada recurso é pequeno por si só; juntos, representam a maior expansão do vocabulário de interface do usuário do HTML em anos.

Acompanhe as propostas (open-ui.org), faça experimentos no Chromium com os sinalizadores ativados e planeje adotar os recursos à medida que se estabilizarem. Audite sua base de código existente: conte quanto JS é dedicado à infraestrutura de diálogos, janelas sobrepostas e dicas de ferramentas. Esse código deve ser substituído nas próximas versões.

Qual é a finalidade do atributo de comando em um botão?

Duas funcionalidades emergentes ampliam o vocabulário declarativo de interface do usuário do HTML: comando + destino do comando para ações acionadas por clique (exibir um modal e alternar uma janela sobreposta) e alvo de interesse + modo de dica para dicas de ferramentas acionadas ao passar o mouse ou receber foco. Ambos substituem padrões comuns de JavaScript por atributos HTML, melhorando a acessibilidade e reduzindo o tamanho do pacote. Ainda estão evoluindo; acompanhe o Open UI para saber quando se estabilizarem e publique-os conforme o suporte dos navegadores chegar.