Fikse feil ved fontskalering i PrimaryButton, SecondaryButton, ActionButton, ShortcutButton og ExpandButton

[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/Buttons/ActionButton/wcag-1.4.4_endring_av_tekstst_rrelse.yml

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

https://github.com/sparebank1utvikling/designsystem-uustatus/tree/main/reports/Buttons/PrimaryButton

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

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

Beskrivelse

Ved skalering av tekststørrelse til 200%, i mobilvisning, blir deler av teksten (og ikonene) i knappene kuttet så det ikke er synlig. Det er testet med tekstmengder som er vanlige ved bruk av knappene i nettbanken og mobilbanken. Ved en viss lengde kuttes tekst og ikoner.

Det gjelder PrimaryButton, SecondaryButton, ActionButton, ShortcutButton og ExpandButton.

PrimaryButton med standard tekststørrelse:

PrimaryButton 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

• text-wrap: Endre fra nowrap til wrap
• line-height: Endre fra piksler til rem
• 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?

Vi kan vurdere å endre overflow fra hidden til visible i tillegg?

[antidecaf]

Fikset i #1807