Yksittäisvalinta ei toimi tällä hetkellä saavutettavasti VoiceOver ruudunlukijalla mikäli käytössä on MacOS ja Safari. Ongelma ei ilmene Chromium-pohjaisilla selaimilla, kuten Chromella tai Edgellä.
Komponentit
Single Select (Yksittäisvalinta)
Yksittäisvalinta-komponentin avulla käyttäjä voi valita yhden vaihtoehdon listalta.
Rajaa tuloksia kirjoittamalla kenttään tai valitse valikosta
Saavutettavuus ja käytettävyys
- Listalla olevien vaihtoehtojen tekstien tulee olla uniikkeja.
- Yksittäisvalinnan kanssa tulee aina käyttää otsaketta (label). Suomi.fi Design Systemin komponenttiin otsake kuuluu pakollisena osana.
- Ohjeistava kenttäteksti (visualPlaceholder) auttaa hahmottamaan syötteen paikan. Sen ei tule sisältää käyttötilanteen kannalta olennaista tietoa.
- Komponentille voidaan asettaa virhetila, jolla voidaan indikoida esimerkiksi virheellistä tai puuttuvaa syötettä. Virhetilassa komponentin reunukset sekä komponentin alla näytettävä tilateksti muuttuvat punaiseksi.
Mistä komponentti koostuu
Yksittäisvalinta koostuu otsakkeesta, hakukentästä, valikosta, tilatekstistä, valinnan poistamiseen tarkoitetusta tyhjennyspainikkeesta sekä valikon näyttämiseen ja piilottamiseen tarkoitetusta painikkeesta. Valikko aukeaa automaattisesti kun fokus siirtyy hakukenttään ja sulkeutuu kun fokus siirtyy pois hakukentästä. Valikon voi myös näyttää tai piilottaa siihen tarkoitetun painikkeen avulla, mutta tämä toiminnallisuus ei ole käytettävissä näppäimistöllä. Valikossa näytettäviä vaihtoehtoja rajataan hakukentän tekstin mukaisesti.
Yksittäiset valinnat voivat olla poistettuna käytöstä, milloin niitä ei voi valita. Valitun vaihtoehdon voi poistaa tyhjennyspainikkeen avulla.
Koko ja käyttö
Yksittäisvalintaa käytetään tilanteissa, missä käyttäjä voi valita yhden vaihtoehdon ennaltamääritellyistä vaihtoehdoista ja erityisesti tilanteissa, missä vaihtoehtoja on paljon ja niiden rajaaminen helpottaa valinnan tekemistä.