Verificação HTML: Valor inválido "button" para o atributo "role" no elemento "li".

Sobre este problema HTML

O elemento <li> tem um role ARIA implícito de listitem, e a especificação WHATWG HTML restringe quais roles podem ser aplicados a ele. O role button não está entre os roles permitidos em <li>. Quando você define role="button" num <li>, está a dizer às tecnologias assistivas que o elemento é um botão, mas o navegador e a especificação ainda o reconhecem como um item de lista. Isto cria um conflito semântico que pode confundir leitores de ecrã e outras ferramentas assistivas, levando a uma experiência degradada para utilizadores que dependem delas.

Além do erro de validação, existem preocupações práticas de acessibilidade. Um elemento <button> real vem com suporte de teclado integrado (é focalizável e ativável com Enter ou Espaço), enquanto um <li> com role="button" não possui esses comportamentos por padrão. Você precisaria adicionar manualmente tabindex, manipuladores de eventos de teclado e estilização de foco—efetivamente recriando o que <button> lhe oferece gratuitamente. Isto é propenso a erros e viola o princípio ARIA de preferir elementos HTML nativos em vez de sobrescritas de role ARIA.

Como corrigir

Existem várias abordagens dependendo do seu caso de uso:

Colocar um <button> dentro de cada <li> — Esta é a melhor abordagem quando você tem uma lista de ações, pois preserva a semântica da lista enquanto fornece funcionalidade adequada de botão.
Usar elementos <button> diretamente — Se os itens não são verdadeiramente uma lista, abandone a estrutura <ul>/<li> e use elementos <button> em vez disso.
Usar um <div> ou <span> com role="button" — Se não conseguir usar um <button> nativo por alguma razão, estes elementos aceitam o role button. Você também precisará adicionar tabindex="0" e manipulação de eventos de teclado você mesmo.

Exemplos

❌ Inválido: `role="button"` em elementos `<li>`

<ul>
  <li role="button">Copiar</li>
  <li role="button">Colar</li>
  <li role="button">Eliminar</li>
</ul>

Isto aciona o erro de validação porque <li> não permite o role button.

✅ Corrigido: Usar elementos `<button>` dentro de `<li>`

<ul>
  <li><button type="button">Copiar</button></li>
  <li><button type="button">Colar</button></li>
  <li><button type="button">Eliminar</button></li>
</ul>

Isto preserva a estrutura da lista enquanto fornece comportamento de botão adequado e acessível sem trabalho extra.

✅ Corrigido: Usar elementos `<button>` independentes

Se a estrutura da lista não é significativa, remova-a inteiramente:

<div>
  <button type="button">Copiar</button>
  <button type="button">Colar</button>
  <button type="button">Eliminar</button>
</div>

✅ Corrigido: Usar o padrão toolbar

Para um grupo de ações relacionadas, o padrão ARIA toolbar é uma ótima opção:

<div role="toolbar" aria-label="Ações de texto">
  <button type="button">Copiar</button>
  <button type="button">Colar</button>
  <button type="button">Eliminar</button>
</div>

✅ Corrigido: Usar `role="button"` num elemento permitido

Se verdadeiramente não conseguir usar um <button> nativo, um <div> ou <span> pode aceitar o role button. Note que deve manipular manualmente o foco e a interação por teclado:

<div role="button" tabindex="0">Copiar</div>

No entanto, esta abordagem é quase sempre inferior a usar um <button> nativo e deve ser usada apenas como último recurso. Elementos nativos fornecem comportamento de teclado, integração de formulários e ganchos de estilização consistentes que são difíceis de replicar de forma confiável.