Rooli Widget

`combobox`

Merkitsee tekstisyötteen, joka on yhdistetty ponnahduslistaukseen — käytetään automaattitäydennyksessä, ennustavan haun syötteissä ja mukautetuissa valintaelementeissä. Natiivi <select> kattaa yksinkertaisen yhden valinnan; role="combobox" tarvitaan vain suodatukseen, mukautettuun renderointiin tai etähakuehdotuksiin.

Milloin käyttää

Käytä <select>-elementtiä, kun valinta tehdään lyhyestä kiinteästä luettelosta eikä käyttäjän tarvitse suodattaa. Natiivielementti tarjoaa mobiiliystävälliset valintaikkunat, täyden näppäimistötuen ja nollan JavaScript-rivin.

role="combobox" sopii tapauksiin, joihin natiivi ei riitä:

Automaattitäydennys suodatuksella (kaupunkihaku, käyttäjämaininta).
Ehdotukset haetaan etä-API:sta.
Kohteet renderoidaan rikkaalla sisällöllä (avatarit, alaotsikko).
Tagi-syötteet, joissa voidaan valita useita arvoja.

ARIA 1.2 muutti combobox-kuviota merkittävästi. Rooli asetetaan <input>-elementtiin, EI kääreelementtiin. Ponnahdusluettelo on erillinen role="listbox" (tai tree/grid/dialog), jota combobox omistaa aria-controls-attribuutilla.

Näppäimistö- ja kohdistussopimus

APG combobox -kuvion mukaisesti:

Kohdistus pysyy aina syötteessä. Luettelo avataan aria-expanded="true":lla ja aktiivinen vaihtoehto seurataan aria-activedescendant-attribuutilla — EI siirtämällä kohdistusta.
Alanuoli avaa ponnahdusvalikon ja siirtää aktiivisen vaihtoehdon ensimmäiselle kohteelle.
Ylä-/alanuolet siirtävät aktiivista vaihtoehtoa ponnahdusvalikoissa.
Enter valitsee aktiivisen vaihtoehdon ja sulkee ponnahdusvalikon.
Escape sulkee ponnahdusvalikon; toisella Escape-painalluksella tyhjennetään syöte.
Kirjoittaminen suodattaa luetteloa (kun aria-autocomplete="list" tai "both").

Aseta aria-autocomplete arvoksi "none", "inline", "list" tai "both" kuvaamaan ehdotustoimintaa.

Yleisiä virheitä

role="combobox":n asettaminen kääreelementtiin eikä <input>-elementtiin (pre-1.2-kuvio). Modernit ruudunlukuohjelmat odottavat roolia muokattavassa elementissä.
DOM-kohdistuksen siirtäminen luetteloon alanuolella. APG vaatii aria-activedescendant-attribuuttia; kohdistuksen siirtäminen rikkoo kirjoittamisen.
aria-expanded juuttuneena "false":en vaikka ponnahdusvalikko on näkyvissä.
Luettelo renderoidaan DOM:ssa mutta sitä ei koskaan linkitetä aria-controls-attribuutilla.
Luettelon suodattaminen mutta aria-activedescendant-attribuutin jättäminen osoittamaan kohteeseen, jota ei enää ole.

Esimerkki

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