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

Sobre este problema HTML

O role combobox representa um widget composto que combina um input de texto com um popup (tipicamente um listbox) que ajuda o utilizador a definir o valor do input. É um padrão comum visto em campos de autocompletar, sugestões de pesquisa e selects dropdown com funcionalidade de escrita antecipada.

A razão pela qual o validador rejeita role="combobox" em <input> está enraizada na forma como a especificação HTML define os roles ARIA permitidos para cada elemento. Um <input type="text"> já carrega um role implícito de textbox, e a especificação apenas permite um conjunto limitado de roles explícitos nele (como combobox em contextos ARIA 1.2, mas a validação HTML do W3C pode ainda sinalizar isto dependendo das regras de conformidade do validador). Quando o validador encontra um role que não está na sua lista permitida para esse elemento, levanta este erro.

Porque isto é importante

Conformidade com padrões: Usar roles fora do conjunto permitido para um elemento viola a especificação HTML, o que pode levar a comportamento imprevisível em browsers e tecnologias assistivas.
Acessibilidade: Tecnologias assistivas como leitores de ecrã dependem de atribuições corretas de roles para comunicar o propósito do widget. Um role mal aplicado pode confundir utilizadores que dependem destas ferramentas, tornando o combobox mais difícil de navegar ou compreender.
Interoperabilidade de browsers: Os browsers podem lidar com roles implícitos e explícitos conflituantes de forma inconsistente, levando a experiências diferentes entre plataformas.

Como corrigir

Existem duas abordagens principais dependendo de que padrão ARIA você segue:

Abordagem 1: Padrão ARIA 1.1 (Contentor como Combobox)

No padrão combobox ARIA 1.1, o role="combobox" é colocado num elemento contentor (como um <div>) que envolve o <input>. Esta é a abordagem mais provável de passar na validação W3C sem problemas.

Abordagem 2: Padrão ARIA 1.2 (Input como Combobox)

O ARIA 1.2 moveu o role combobox diretamente para o próprio elemento <input>, que é um padrão mais simples e mais amplamente adotado na prática. No entanto, o W3C HTML Validator pode ainda sinalizar isto como erro se as suas regras de conformidade não foram atualizadas para refletir o ARIA 1.2. Se passar na validação é um requisito estrito, use a Abordagem 1.

Exemplos

❌ Incorreto: `role="combobox"` diretamente no `<input>`

Isto despoleta o erro de validação:

<input type="text" role="combobox" aria-autocomplete="list">

✅ Correto: Padrão ARIA 1.1 com elemento contentor

O role="combobox" é colocado no <div> que envolve, e o <input> dentro dele lida com a entrada de texto:

<div role="combobox" aria-haspopup="listbox" aria-owns="suggestions" aria-expanded="false">
  <input type="text" aria-autocomplete="list" aria-controls="suggestions">
</div>
<ul id="suggestions" role="listbox" hidden>
  <li role="option" id="opt-1">Apple</li>
  <li role="option" id="opt-2">Banana</li>
  <li role="option" id="opt-3">Cherry</li>
</ul>

Atributos chave explicados:

role="combobox" no <div> define o widget geral para tecnologias assistivas.
aria-haspopup="listbox" diz aos leitores de ecrã que este widget tem um popup do tipo listbox.
aria-owns="suggestions" estabelece uma relação de propriedade entre o combobox e o listbox, mesmo que não sejam pai-filho no DOM.
aria-expanded="false" indica se o popup está atualmente visível. Atualize isto para "true" via JavaScript quando a lista é mostrada.
aria-autocomplete="list" no <input> sinaliza que sugestões serão apresentadas numa lista conforme o utilizador escreve.
aria-controls="suggestions" no <input> liga-o ao listbox que controla.

✅ Correto: Padrão ARIA 1.2 usando `<input>` com `role="combobox"` (se a validação não for estrita)

Se o seu projeto segue ARIA 1.2 e você pode tolerar ou suprimir o aviso de validação, este padrão é amplamente suportado por browsers modernos e leitores de ecrã:

<label for="fruit">Escolha uma fruta</label>
<input
  id="fruit"
  type="text"
  role="combobox"
  aria-autocomplete="list"
  aria-expanded="false"
  aria-controls="fruit-list"
  aria-haspopup="listbox">
<ul id="fruit-list" role="listbox" hidden>
  <li role="option" id="fruit-1">Apple</li>
  <li role="option" id="fruit-2">Banana</li>
  <li role="option" id="fruit-3">Cherry</li>
</ul>

Este é o padrão recomendado pelo WAI-ARIA Authoring Practices Guide e é o mais comumente implementado em bibliotecas de componentes modernas. Se a conformidade com validação é necessária, envolva o input num contentor e mova o role="combobox" para lá como mostrado na Abordagem 1.

Qualquer que seja a abordagem que você escolha, lembre-se de que atributos ARIA sozinhos não criam comportamento — você precisará de JavaScript para alternar aria-expanded, gerir foco, lidar com navegação por teclado, e atualizar aria-activedescendant conforme o utilizador se move pelas opções.