FileInput (Tiedostokenttä)
Tiedostokenttää käytetään tiedostojen liittämiseksi lomakkeeseen.
Saavutettavuus ja käytettävyys
- Tiedostokentän kanssa tulee käyttää otsaketta (labelText), joka kuvaa tiedostokentän tarkoituksen. Otsake on osa tiedostokenttäkomponenttia.
- Komponentin ohjetekstiä (hintText) tulee käyttää antamaan ohjeita sallituista tiedostomuodoista sekä tiedostojen maksimikoosta ja määrästä.
- Tiedostonvalintapainikkeen tekstin tulee kertoa selkeästi, että painikkeella valitaan tiedosto.
- Alueelle, johon tiedosto voidaan raahata, tulee antaa selkeä teksti (dragAreaText) josta drag & drop -toiminnallisuus käy ilmi
- Tiedoston poistavalle painikkeelle tulee antaa selkeä ja kuvaava teksti (removeFileText)
- Komponentille tulee myös asettaa lisätyn tiedoston ruudunlukija-aputeksti (addedFileAriaText), joka luetaan ennen lisätyn tiedoston nimeä. Tämä teksti antaa ruudunlukijakäyttäjälle lisäkontekstia siitä, että kyseessä on lisätty tiedosto.
Mistä komponentti koostuu
Tiedostokenttä koostuu otsakkeesta, tiedostonvalintapainikkeesta, raahausalueesta ja tiedoston poistopainikkeesta. Tiedostokenttään voidaan antaa ohjeteksti, joka näytetään otsakkeen ja tiedostonvalintapainikkeen välissä. Ohjetekstin tulee sisältää tietoa tiedostojen maksimikoosta, sallituista tiedostomuodoista ja määrästä.
Kun komponenttia käytetään valitsemaan vain yksi tiedosto, tiedostonvalintapainike ja raahausalue korvautuvat valitulla tiedostolla. Usean tiedoston käyttötapauksessa lisätyt tiedostot listataan komponentin alle.
Tiedostonvalintapainike on teknisesti piilossa olevan HTML-inputin label-elementti, joka on tyylitelty painikkeen näköiseksi. Tämä mahdollistaa komponentin toiminnan natiivin HTML-tiedostokentän tavoin.
Koko ja käyttö
Tiedostokenttä on suunniteltu käytettäväksi osana lomaketta. Sen maksimileveys normaalissa tilassaan on 600 pikseliä, mutta se voidaan myös asettaa täyttämään koko saatavissa oleva horisontaalinen tila (fullWidth).
Komponentti voidaan asettaa käyttämään kapeita ruutukokoja varten suunnitelua ulkoasua (smallScreen), jolloin se on käytettävämpi esimerkiksi mobiililaitteilla.