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 hetid
van de popup - (4.1.2) Geselecteerde opties moeten
aria-selected="true"
hebben - (4.1.2) Niet-geselecteerde opties moeten
aria-selected="false"
(of geenaria-selected
) hebben
Optioneel
- (1.3.1) Het invoerveld moet
aria-activedescendant
hebben met hetid
van de actieve optie - (1.3.1) Het invoerveld moet
aria-autocomplete
hebben met:none
: suggesties veranderen niet tijdens typenlist
: suggesties filteren op getypte tekstboth
: 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)