Combobox

Teclado

Enter

Selecciona el elemento resaltado actualmente y cierra el listbox.

Escape

Cierra el listbox sin seleccionar. El foco permanece en la entrada.

ArrowDown

Abre el listbox si está cerrado, o mueve el resaltado al siguiente elemento.

ArrowUp

Abre el listbox si está cerrado, o mueve el resaltado al elemento anterior.

Tab

Cierra el listbox y mueve el foco al siguiente elemento enfocable.

Foco

• La entrada mantiene el foco del DOM en todo momento mientras el listbox está abierto.
• El patrón de descendiente activo resalta visualmente el elemento actual sin mover el foco.
• El foco vuelve a la entrada después de que el listbox se cierra.

Semántica

• Input tiene role combobox.
• Input expone aria-autocomplete=list indicando que se presentan sugerencias.
• Content tiene role listbox.
• Cada elemento tiene role option.

ARIA

• Input expone aria-expanded reflejando el estado de apertura.
• Input expone aria-controls apuntando al id del listbox.
• Input expone aria-activedescendant apuntando al id del elemento resaltado.
• Cada elemento expone aria-selected reflejando el estado de selección.

Responsabilidades del consumidor

• Proporciona una etiqueta accesible para la entrada mediante un elemento label visible o aria-label.
• Comunica un estado vacío cuando ningún elemento coincide con el filtro actual.
• Asegura que los valores de texto de los elementos sean únicos y descriptivos.