Validación HTML: Valor incorrecto "combobox" para el atributo "role" en el elemento "input".

Acerca de este problema HTML

El rol combobox representa un widget compuesto que combina una entrada de texto con un popup (típicamente un listbox) que ayuda al usuario a establecer el valor de la entrada. Es un patrón común visto en campos de autocompletado, sugerencias de búsqueda y selects desplegables con funcionalidad de escritura anticipada.

La razón por la que el validador rechaza role="combobox" en <input> se basa en cómo la especificación HTML define los roles de ARIA permitidos para cada elemento. Un <input type="text"> ya tiene un rol implícito de textbox, y la especificación solo permite un conjunto limitado de roles explícitos en él (como combobox en contextos ARIA 1.2, pero la validación HTML de W3C puede seguir marcando esto dependiendo de las reglas de conformidad del validador). Cuando el validador encuentra un rol que no está en su lista permitida para ese elemento, genera este error.

Por qué esto importa

Cumplimiento de estándares: Usar roles fuera del conjunto permitido para un elemento viola la especificación HTML, lo que puede llevar a comportamiento impredecible entre navegadores y tecnologías de asistencia.
Accesibilidad: Las tecnologías de asistencia como los lectores de pantalla dependen de asignaciones correctas de roles para transmitir el propósito del widget. Un rol mal aplicado puede confundir a usuarios que dependen de estas herramientas, haciendo que el combobox sea más difícil de navegar o entender.
Interoperabilidad del navegador: Los navegadores pueden manejar roles implícitos y explícitos conflictivos de manera inconsistente, llevando a experiencias diferentes entre plataformas.

Cómo solucionarlo

Hay dos enfoques principales dependiendo de qué patrón ARIA sigas:

Enfoque 1: Patrón ARIA 1.1 (contenedor como combobox)

En el patrón combobox ARIA 1.1, el role="combobox" se coloca en un elemento contenedor (como un <div>) que envuelve el <input>. Este es el enfoque más probable de pasar la validación W3C sin problemas.

Enfoque 2: Patrón ARIA 1.2 (input como combobox)

ARIA 1.2 movió el rol combobox directamente al elemento <input> mismo, que es un patrón más simple y ampliamente adoptado en la práctica. Sin embargo, el Validador HTML de W3C puede seguir marcando esto como error si sus reglas de conformidad no se han actualizado para reflejar ARIA 1.2. Si pasar la validación es un requisito estricto, usa el Enfoque 1.

Ejemplos

❌ Incorrecto: `role="combobox"` directamente en `<input>`

Esto desencadena el error de validación:

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

✅ Correcto: patrón ARIA 1.1 con elemento contenedor

El role="combobox" se coloca en el <div> envolvente, y el <input> dentro de él maneja la 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 clave explicados:

role="combobox" en el <div> define el widget general para las tecnologías de asistencia.
aria-haspopup="listbox" dice a los lectores de pantalla que este widget tiene un popup de tipo listbox.
aria-owns="suggestions" establece una relación de propiedad entre el combobox y el listbox, incluso si no son padre-hijo en el DOM.
aria-expanded="false" indica si el popup está visible actualmente. Actualiza esto a "true" vía JavaScript cuando se muestre la lista.
aria-autocomplete="list" en el <input> señala que se presentarán sugerencias en una lista mientras el usuario escribe.
aria-controls="suggestions" en el <input> lo vincula al listbox que controla.

✅ Correcto: patrón ARIA 1.2 usando `<input>` con `role="combobox"` (si la validación no es estricta)

Si tu proyecto sigue ARIA 1.2 y puedes tolerar o suprimir la advertencia de validación, este patrón es ampliamente soportado por navegadores modernos y lectores de pantalla:

<label for="fruit">Elige una 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 es el patrón recomendado por la Guía de Prácticas de Autoría WAI-ARIA y es el más comúnmente implementado en bibliotecas de componentes modernas. Si se requiere cumplimiento de validación, envuelve el input en un contenedor y mueve el role="combobox" allí como se muestra en el Enfoque 1.

Sea cual sea el enfoque que elijas, recuerda que los atributos ARIA por sí solos no crean comportamiento — necesitarás JavaScript para alternar aria-expanded, manejar el foco, manejar la navegación con teclado y actualizar aria-activedescendant mientras el usuario se mueve a través de las opciones.