combobox

Kiedy używać

Używaj <select>, gdy wybór pochodzi z krótkiej, stałej listy i użytkownik nie potrzebuje filtrowania. Natywny element zapewnia przyjazne dla urządzeń mobilnych selektory, pełną obsługę klawiatury i zero JavaScriptu.

role="combobox" jest przeznaczony dla przypadków, których natywny element nie obsługuje:

• Autouzupełnianie z filtrowaniem (wyszukiwanie miast, wzmianki o użytkownikach).
• Sugestie pobierane ze zdalnego API.
• Elementy renderowane z bogatą zawartością (awatary, tekst pomocniczy).
• Pola tagów, gdzie można wybrać wiele wartości.

ARIA 1.2 znacząco zmieniło wzorzec combobox. Rola trafia na <input>, NIE na wrapper. Wyskakujące okno to oddzielny role="listbox" (lub tree/grid/dialog), który combobox posiada poprzez aria-controls.

Kontrakt klawiaturowy i fokus

Zgodnie z wzorcem APG dla combobox:

• Fokus pozostaje na inpucie przez cały czas. Listbox jest otwierany poprzez aria-expanded="true", a aktywna opcja jest śledzona przez aria-activedescendant, NIE przez przenoszenie fokusu.
• Strzałka w dół otwiera wyskakujące okno i przenosi aktywną opcję do pierwszego elementu.
• Strzałki w górę/dół przesuwają aktywną opcję wewnątrz wyskakującego okna.
• Enter wybiera aktywną opcję i zamyka wyskakujące okno.
• Escape zamyka wyskakujące okno; przy drugim naciśnięciu Escape czyści input.
• Wpisywanie filtruje listę (gdy aria-autocomplete="list" lub "both").

Ustaw aria-autocomplete na "none", "inline", "list" lub "both", aby opisać zachowanie sugestii.

Typowe błędy

• Umieszczenie role="combobox" na wrapperze zamiast na <input> (wzorzec sprzed wersji 1.2). Nowoczesne czytniki ekranu oczekują roli na edytowalnym elemencie.
• Przenoszenie fokusu DOM do listboxa po naciśnięciu strzałki w dół. APG nakazuje użycie aria-activedescendant; przenoszenie fokusu uniemożliwia pisanie.
• aria-expanded zablokowane na "false", gdy wyskakujące okno jest widoczne.
• Listbox wyrenderowany w DOM, ale nigdy niepołączony przez aria-controls.
• Filtrowanie listy przy pozostawieniu aria-activedescendant wskazującego na element, który już nie istnieje.

Przykład

<label for="city">Miasto</label>
<input
  id="city"
  type="text"
  role="combobox"
  aria-controls="cityList"
  aria-expanded="false"
  aria-autocomplete="list"
  aria-activedescendant=""
>
<ul id="cityList" role="listbox" hidden>
  <li id="city-1" role="option">Londyn</li>
  <li id="city-2" role="option">Lizbona</li>
  <li id="city-3" role="option">Lublana</li>
</ul>