Roll Widget

`combobox`

Markerar en textinmatning ihopkopplad med en popuplista med värden — används för autokomplettering, type-ahead-sökning och anpassade select-menyer. Det inbyggda <select>-elementet hanterar enkelt enval; nå bara för role="combobox" när du behöver filtrering, anpassad rendering eller fjärrförslag.

När ska rollen användas

Använd <select> när valet är från en kort, fast lista och användaren inte behöver filtrera. Det inbyggda elementet levererar mobilanpassade väljare, fullt tangentbordsstöd och noll JavaScript.

role="combobox" är för fall som det inbyggda elementet inte klarar:

Autokomplettering med filtrering (stadsökning, @-omnämnanden).
Förslag hämtade från ett fjärr-API.
Objekt renderade med rikt innehåll (avatarer, sekundär text).
Tagginmatningar där flera värden kan väljas.

ARIA 1.2 ändrade combobox-mönstret avsevärt. Rollen placeras på <input>, INTE på omslutaren. Popupen är en separat role="listbox" (eller tree/grid/dialog) som comboboxen äger via aria-controls.

Tangentbord och fokuskontrakt

Enligt APG:s combobox-mönster:

Fokus stannar på inmatningsfältet hela tiden. Listboxen öppnas via aria-expanded="true" och det aktiva alternativet spåras via aria-activedescendant, INTE genom att flytta fokus.
Nedpilen öppnar popupen och flyttar det aktiva alternativet till det första objektet.
Upp-/nedpilarna flyttar det aktiva alternativet inom popupen.
Enter väljer det aktiva alternativet och stänger popupen.
Escape stänger popupen; vid ett andra Escape rensas inmatningsfältet.
Att skriva filtrerar listan (när aria-autocomplete="list" eller "both").

Sätt aria-autocomplete till "none", "inline", "list" eller "both" för att beskriva förslagsbeteendet.

Vanliga fel

Placera role="combobox" på omslutaren istället för på <input> (mönstret före 1.2). Moderna skärmläsare förväntar sig rollen på det redigerbara elementet.
Flytta DOM-fokus in i listboxen vid nedpil. APG kräver aria-activedescendant; att flytta fokus bryter skrivfunktionen.
aria-expanded fastnat på "false" även när popupen syns.
Listboxen renderad i DOM men aldrig länkad från aria-controls.
Filtrera listan men lämna aria-activedescendant pekande på ett objekt som inte längre finns.

Exempel

<label for="city">Stad</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">London</li>
  <li id="city-2" role="option">Lissabon</li>
  <li id="city-3" role="option">Ljubljana</li>
</ul>