Decide on focus behaviour

[mrosvik]

Should focus be visible only for tab navigation or when clicking with mouse as well? Today we do this different in radio (no focus visible on click), and on buttons (focus visible on click). Is it okey to do it different for different components, or should this be consistent?

Nav have used keyboard only, while Gov UK have used the same focus style for keyboard and mouse.

More info about focus from GovUK: https://design-system.service.gov.uk/get-started/focus-states/

[mrosvik]

@Camulos Vi tar et møte for å lande denne oppførselen. Vil du være med?

[mrosvik]

Nav har endret oppførsel på focus til at det kun er tastatur-fokus som er veldig tydelig med høy kontrast, mens mus-fokus er stylet til å matche designspråket bedre.

Dette gjøres med :focus-visible
https://hidde.blog/focus-visible-more-than-keyboard/

Det begrunnes med at "Det gir ikke mening å sette focus på en knapp man allerede har sett og trykket på"

Eller gjør det det, for at bruker skal få en bekreftelse på at de traff og hvor de er?

Brukertester med svaksynte som bruker musepeker til å navigere med:

• https://www.designsystemet.no/god-praksis/tilgjengelighet/forsta-synsnedsettelse (11:45 i filmen)
• Har vi noe mer her? Kan vi kontakte blindeforbundet og høre om noen kunne deltatt på en brukertest konkret for dette? @Febakke

[mrosvik]

Møte 26.09.23
@Camulos @mimarz @Febakke @Thuneer @mrosvik

• Ønsker vi å skille på vanlig fokus og tastaturfokus? Fordelen med å skille dem er at vi da kan gjøre tastaturfokus ekstra synlig, mens har vi bare en så kan vi ikke være like tydelige

Fokus kan enten ha

• Svart og gul ramme
• Gul bakgrunn og svart underline
• Gul bakgrunn og svart ramme

[mrosvik]

Vi trenger et nytt møte for å lande dette @Camulos @Thuneer @Febakke

Alternativ 1) Vi kan bruke veldig tydelig fokus ved tastaturnavigering dersom vi skjuler den ved klikk (focus-visible).
Alternativ 2) Bruke litt mindre tydelig fokus som er synlig hele tiden også ved klikk.

[Thunear]

Laga til ein prototype der man kan velge mellom dei ulike variantane og sjå korleis det ser ut.
Legger den til her i tilfelle me kan bruke den i diskusjoner: https://thuneer.github.io/react-focus/#/
Sider: /, /innovasjon, /innovasjon/stimulab, /innovasjon/startoff, /login, /dashboard.

Kan bytte mellom states oppe til venstre:
Only-focus-visible: Kun tastatur fokus.
Focus-descrete: Focus med outline.
Focus-heavy: Focus der bakgrunssfarge endrer seg.

[Camulos]

Min egen preferanse på dem blir Focus-descrete. Kanskje heavy kun på tekst

[mimarz]

Meeting 31.10.23

@mrosvik will schedule a new meeting for this

[mimarz]

We talked about update Link to only show focus on keyboard interaction/navigation.

[mrosvik]

We have received feedback that it is disturbing with the yellow background that appears when clicking on links, so we need to discuss whether we can use the yellow style only for keyboard navigation for some components. @Camulos @Thuneer

[mrosvik]

Møte 19.01.24
Deltakere: @mimarz @Camulos @Thuneer @Febakke @mrosvik

Beslutninger:

• Textfield, textarea, combobox, search beholder gul focus style ved klikk
• Radio, checkbox, switch, tabs, card blir som de er (gul ved tastaturnavigering, ikke ved klikk)
• Link endres til å kun vise gulfarge ved tastaturnavigering (ikke ved klikk) PR refactor(Link): ♻️ Change focus to focus-visible #1403
• Button endres til å ha gul bakgrunn ved tastaturnavigering (i stedet for gul outline). Skal ikke bli gul ved klikk. Focus style for buttons and links should have yellow background (React) #820
• Vi skriver en artikkel om begrunnelsen for valgene som er tatt. Begynner diskusjon og argumentasjon her i Article: About our focus state styles #997