Validación HTML: Valor incorrecto "" para el atributo "aria-activedescendant" en el elemento "input": un ID no debe ser una cadena vacía.

Acerca de este problema HTML

El atributo aria-activedescendant indica a las tecnologías de asistencia qué elemento hijo dentro de un widget compuesto — como un combobox, listbox, o dropdown de autocompletado — está actualmente “activo” o enfocado. En lugar de mover el foco real del DOM a cada opción, el elemento padre (como un input) mantiene el foco mientras aria-activedescendant apunta a la opción visualmente resaltada referenciando su id. Esto permite que los lectores de pantalla anuncien la opción activa sin interrumpir la interacción del teclado en el input.

Cuando aria-activedescendant se establece como una cadena vacía (""), crea un estado inválido. Las especificaciones HTML y ARIA requieren que cualquier atributo de referencia de ID contenga un token de ID válido y no vacío, o se omita por completo. Una cadena vacía no es un ID válido, por lo que el validador W3C marca esto como un error: Valor incorrecto “” para el atributo “aria-activedescendant” en el elemento “input”: un ID no debe ser una cadena vacía.

Este problema ocurre comúnmente en widgets controlados por JavaScript donde aria-activedescendant se borra estableciéndolo como "" cuando ninguna opción está resaltada — por ejemplo, cuando un dropdown se cierra o el usuario limpia su selección. Aunque la intención del desarrollador es correcta (indicar que nada está activo), la implementación es incorrecta.

Por qué esto importa

Accesibilidad: Los lectores de pantalla pueden comportarse de manera impredecible cuando encuentran una referencia de ID vacía. Algunos pueden ignorarla silenciosamente, mientras que otros pueden anunciar errores o fallar al transmitir correctamente el estado del widget.
Cumplimiento de estándares: La especificación ARIA requiere explícitamente que los valores de referencia de ID sean cadenas no vacías que coincidan con el id de un elemento existente.
Consistencia del navegador: Los navegadores manejan los atributos ARIA inválidos de manera inconsistente, lo que puede llevar a experiencias diferentes entre plataformas y tecnologías de asistencia.

Cómo solucionarlo

Elimina el atributo cuando ningún descendiente esté activo. Usa removeAttribute('aria-activedescendant') en JavaScript en lugar de establecerlo como una cadena vacía.
Establece un ID válido cuando un descendiente se vuelva activo, apuntando al id de la opción actualmente resaltada o seleccionada.
Nunca renderices el atributo en HTML con un valor vacío. Si tu framework o motor de plantillas renderiza atributos condicionalmente, asegúrate de que omita el atributo completamente en lugar de generar aria-activedescendant="".

Ejemplos

Incorrecto: valor de cadena vacía

Esto provoca el error de validación W3C porque el valor del atributo es una cadena vacía.

<input type="text" role="combobox" aria-activedescendant="" />

Correcto: atributo omitido cuando ninguna opción está activa

Cuando nada está activo, simplemente omite el atributo.

<input type="text" role="combobox" aria-expanded="false" />

Correcto: referencia de ID válida cuando una opción está activa

Cuando un usuario resalta una opción, establece aria-activedescendant al id de esa opción.

<div role="combobox">
  <input
    type="text"
    role="combobox"
    aria-expanded="true"
    aria-controls="suggestions"
    aria-activedescendant="option2" />
  <ul id="suggestions" role="listbox">
    <li id="option1" role="option">Apple</li>
    <li id="option2" role="option" aria-selected="true">Banana</li>
    <li id="option3" role="option">Cherry</li>
  </ul>
</div>

Correcto: gestionando el atributo dinámicamente con JavaScript

La corrección clave en JavaScript es usar removeAttribute en lugar de establecer el valor como una cadena vacía.

<div role="combobox">
  <input
    id="search"
    type="text"
    role="combobox"
    aria-expanded="true"
    aria-controls="results" />
  <ul id="results" role="listbox">
    <li id="result1" role="option">First result</li>
    <li id="result2" role="option">Second result</li>
  </ul>
</div>
<script>
  const input = document.getElementById('search');

  function setActiveOption(optionId) {
    if (optionId) {
      input.setAttribute('aria-activedescendant', optionId);
    } else {
      // Remove the attribute instead of setting it to ""
      input.removeAttribute('aria-activedescendant');
    }
  }
</script>

En resumen, siempre asegúrate de que aria-activedescendant apunte a un id real y no vacío o se elimine del elemento. Nunca lo establezcas como una cadena vacía.