Fikse problem med todimensjonal skroll ved fontskalering i BulletList, CheckList, DescriptionList og NumberedList

[andrea-sb1]

Lovkrav

https://www.uutilsynet.no/wcag-standarden/144-endring-av-tekststorrelse-niva-aa/96

Tester

https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Lists/BulletList/wcag-1.4.4_endring_av_tekstst_rrelse.yml

https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Lists/CheckList/wcag-1.4.4_endring_av_tekstst_rrelse.yml

https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Lists/DescriptionList/wcag-1.4.4_endring_av_tekstst_rrelse.yml

https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Lists/NumberedList/wcag-1.4.4_endring_av_tekstst_rrelse.yml

Beskrivelse

Ved skalering av tekststørrelse til 200%, i mobilvisning, flyter teksten i BulletList, CheckList, DescriptionList og NumeredList ut over containeren til komponenten samt skjermen og introduserer horisontal skroll. Det gjelder ved bruk av ord med en viss lengde.

Dette skal ikke være brudd på lovkravet siden innholdet fortsatt er tilgjengelig og forståelig, ved hjelp av skroll. Mener fortsatt vi bør løse det siden todimensjonal skroll bør unngås, i tråd med WCAG 2.1/2.2, 1.4.10 Reflow (ekstern lenke).

CheckList med standard tekststørrelse:

CheckList med tekststørrelse 200%:

Det er også mulig for kunder/brukere å velge enda større tekststørrelse enn 200% (200% er bare minimumskravet, i loven). Det vil bare forsterke problemet.

Forslag til løsning

Legge til word-break: break-all eller overflow-wrap: anywhere;. Kanskje overflow-wrap: anywhere; er beste løsning, for å unngå at ord brekkes der de heller kan havne på ny linje?