[Innspill til komponent]: <Select /> – utfordringer tilknyttet UU

[finiteattention]

Tilbakemelding

Hei :)

1. Kan vi fjerne placeholder-text fra eksempelet som vises på https://aksel.nav.no/komponenter/core/select?

Det er i utgangspunktet dårlig praksis å bruke placeholder. For det første, slik komponenten er nå, blir det en uheldig brukeropplevelse når du får opp select-valgene: et av valgene utgjør en call to action om å velge et av de andre. It makes no sense! Men det finnes flere grunner tilknyttet UU til at man helst ikke skal bruke placeholder. Ask me for my rant, I dare you 😘

Jeg mener at Aksel har et ansvar her for å selv vise god praksis. La de som kan begrunne bruk av placeholder bruke den hvis de må, men jeg synes det er uheldig at vi viser den som default. Folk ser opp til dere og forventer at det de får er universelt utformet og good to go, men jeg tror ikke man kan si det om komponenten slik den står på Aksel-sida i dag.

(På si: i eksempelet som vises kunne labelen vært "Velg hvilket land du er bosatt i". Dagens placeholder kompenserer for en svak label-tekst; sånn er det ofte med placeholder.)

2. Man får ulike opplevelser av Select-komponenten avhengig av om man navigerer med mus eller tastatur, og dette kan være uheldig:

• Ved å sette musa inn i feltet, får du umiddelbart opp alle valg, og kan velge.
• Ved å navigere dit med tastatur, får du (synlig) fokus, men lista over valg dukker ikke opp.
• Nå for tastaturnavigatøren ser dette feltet ut til å være et sted hvor hen kan skrive. Men det kan hen ikke.
• Select-komponenten må egentlig ikke bli så veldig bred før brukeren ikke lenger oppdager pila til høyre som indikerer at dette ikke er et tekstfelt. Hvis ikke du oppdager pila, så vet du ikke at du er i en Select og kan bruke spacebar til å få opp valgene.

Jeg er litt usikker på hvordan man kunne løst denne nøtta med visuell og interaksjonsdesign, men har gått i samme felle selv.

Som alltid, takk som leser og keep up the good work ❤️

[KenAJoh]

Takk for innspill som vanlig! 🙌

Vi bruker ikke placeholder-tekst på Select eksemplene våre, men en standard option satt på selve Select. Dette er et ganske vanlig pattern der første valg i Select er en "placeholder" (men ikke placeholder-attributtet i html). Kan se f.eks MDN legge til -- før og etter teksten for å fremheve at dette ikke er et faktisk valg. Kanskje dette er noe vi kunne ha testet også? Man unngår da at bruker forventer at man skal kunne skrive i feltet, noe som lett kan hende hvis det er helt tomt. 🤔

Man får ulike opplevelser av Select-komponenten avhengig av om man navigerer med mus eller tastatur, og dette kan være uheldig

Vår Select er bare en litt stylet native-select. Derfor vil det være litt ulikt hvordan mus/tastatur interagerer med den basert på både browser og OS brukt. Den største forskjellen er mellom MacOs og Windows der Select er implementert helt forskjellig 😵

Vi nevner i dokumentasjonen at feltet alltid burde matche bredden på forventet innhold, slik at man forhåpentligvis ikke ender opp med pilen for langt unna starten av feltet 🤞

[KenAJoh]

Vi har nå oppdatert alle eksemplene med denne varianten 🎉