Combobox

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Een combobox is een invoerveld met een bijbehorende popup. Gebruikers kiezen een waarde uit de popup. Deze popup kan een list, grid, tree of dialog zijn. In dit voorbeeld gebruik ik een lijst.

Gebruik een combobox als:

• De waarde uit een voorgedefinieerde set moet komen
• Je willekeurige waarden toestaat maar suggesties wilt bieden

Er zijn twee hoofdtypen combobox:

• Select-only: gebruikers kunnen alleen een optie kiezen uit de lijst
• Editable: gebruikers kunnen typen en krijgen gefilterde opties

Technische opbouw

• (4.1.2) Het component moet een <input>-element gebruiken
• (2.4.6) Het invoerveld moet een toegankelijke naam hebben die het doel beschrijft
• (4.1.2) Het invoerveld moet role="combobox" hebben
• (4.1.2) De popup moet role="listbox" hebben
• (4.1.1) De listbox moet een uniek id hebben
• (4.1.2) Opties in de lijst moeten role="option" hebben
• (4.1.2) Een uitgevouwen invoerveld moet aria-expanded="true" hebben
• (4.1.2) Een samengevouwen invoerveld moet aria-expanded="false" hebben
• (1.3.1) Het invoerveld moet aria-controls hebben met het id van de popup
• (4.1.2) Geselecteerde opties moeten aria-selected="true" hebben
• (4.1.2) Niet-geselecteerde opties moeten aria-selected="false" (of geen aria-selected) hebben

Optioneel

• (1.3.1) Het invoerveld moet aria-activedescendant hebben met het id van de actieve optie
• (1.3.1) Het invoerveld moet aria-autocomplete hebben met:
  • none: suggesties veranderen niet tijdens typen
  • list: suggesties filteren op getypte tekst
  • both: filtering én automatische aanvulling

Component staten

• (3.3.2) Verplicht: required
• (4.1.2) Uitgeschakeld: disabled
• (4.1.2) Alleen-lezen: readonly
• (3.3.1) Validatie: aria-invalid="true/false"

Toetsenbordbediening

Invoerveld

• Escape:
  • Bij een uitgevouwen popup: sluit de popup
• Pijltjestoetsen:
  • Pijl omlaag: Activeert de eerste optie in de popup
• Tekens typen:
  • Typt tekens
• Tab:
  • Verlaat de combobox, ga naar het volgende element

Popup

• Enter:
  • Accepteert de geselecteerde optie, sluit popup en keer terug naar de combobox
• Escape:
  • Sluit de popup en keer terug naar combobox
• Pijltjestoetsen:
  • Omlaag: Gaat naar de volgende optie in de popup
  • Omhoog: Gaat naar de vorige optie in de popup
  • Links/Rechts: Verplaatst de cursor in het invoerveld (als editable)

Optionele toetsen

• Home:
  • Gaat naar de eerste optie in de popup
• End:
  • Gaat naar de laatste optie in de popup

Focus management

• Focus blijft altijd op de combobox, houd de popup buiten de focus volgorde

Voorbeeld combobox

See the Pen Combobox by Niek (@niekd) on CodePen.

Bronnen

• Combobox Pattern | APG | WAI | W3C (Engelstalig)