Verificação HTML: Valor inválido "" para o atributo "aria-activedescendant" no elemento "input": Um ID não pode ser uma string vazia.

Sobre este problema HTML

O atributo aria-activedescendant informa as tecnologias assistivas sobre qual elemento filho dentro de um widget composto — como uma combobox, listbox ou dropdown de autocompletar — está atualmente “ativo” ou em foco. Em vez de mover o foco real do DOM para cada opção, o elemento pai (como um input) mantém o foco enquanto aria-activedescendant aponta para a opção visualmente destacada através da referência ao seu id. Isto permite que os leitores de ecrã anunciem a opção ativa sem interromper a interação do teclado no input.

Quando aria-activedescendant é definido como uma string vazia (""), cria um estado inválido. As especificações HTML e ARIA exigem que qualquer atributo de referência de ID contenha um token de ID válido e não vazio ou seja omitido completamente. Uma string vazia não é um ID válido, portanto o validador W3C assinala isto como um erro: Valor inválido “” para o atributo “aria-activedescendant” no elemento “input”: Um ID não pode ser uma string vazia.

Este problema ocorre frequentemente em widgets controlados por JavaScript onde aria-activedescendant é limpo ao defini-lo como "" quando nenhuma opção está destacada — por exemplo, quando um dropdown fecha ou o utilizador limpa a sua seleção. Embora a intenção do programador esteja correta (indicando que nada está ativo), a implementação está incorreta.

Porque isto é importante

Acessibilidade: Os leitores de ecrã podem comportar-se de forma imprevisível ao encontrar uma referência de ID vazia. Alguns podem ignorá-la silenciosamente, enquanto outros podem anunciar erros ou falhar na transmissão correta do estado do widget.
Conformidade com normas: A especificação ARIA exige explicitamente que os valores de referência de ID sejam strings não vazias que correspondam ao id de um elemento existente.
Consistência do navegador: Os navegadores lidam com atributos ARIA inválidos de forma inconsistente, o que pode levar a experiências diferentes entre plataformas e tecnologias assistivas.

Como corrigir

Remova o atributo quando nenhum descendente estiver ativo. Use removeAttribute('aria-activedescendant') em JavaScript em vez de defini-lo como uma string vazia.
Defina um ID válido quando um descendente se torna ativo, apontando para o id da opção atualmente destacada ou selecionada.
Nunca renderize o atributo em HTML com um valor vazio. Se a sua framework ou motor de templates renderiza condicionalmente atributos, certifique-se de que omite o atributo completamente em vez de produzir aria-activedescendant="".

Exemplos

Incorreto: valor de string vazia

Isto desencadeia o erro de validação W3C porque o valor do atributo é uma string vazia.

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

Correto: atributo omitido quando nenhuma opção está ativa

Quando nada está ativo, simplesmente deixe o atributo de fora.

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

Correto: referência de ID válida quando uma opção está ativa

Quando um utilizador destaca uma opção, defina aria-activedescendant para o id dessa opção.

<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">Maçã</li>
    <li id="option2" role="option" aria-selected="true">Banana</li>
    <li id="option3" role="option">Cereja</li>
  </ul>
</div>

Correto: gerir o atributo dinamicamente com JavaScript

A correção chave em JavaScript é usar removeAttribute em vez de definir o valor como uma string vazia.

<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">Primeiro resultado</li>
    <li id="result2" role="option">Segundo resultado</li>
  </ul>
</div>
<script>
  const input = document.getElementById('search');

  function setActiveOption(optionId) {
    if (optionId) {
      input.setAttribute('aria-activedescendant', optionId);
    } else {
      // Remover o atributo em vez de defini-lo como ""
      input.removeAttribute('aria-activedescendant');
    }
  }
</script>

Em resumo, certifique-se sempre de que aria-activedescendant aponta para um id real e não vazio ou é removido do elemento. Nunca o defina como uma string vazia.