AtB-AS / webshop

AtB Webshop / AtB Nettbutikk
https://nettbutikk.atb.no
European Union Public License 1.2
0 stars 1 forks source link

feat: Improve radio buttons accessibility #374

Closed gorandalum closed 3 years ago

gorandalum commented 3 years ago

Made the hidden original radio button input not selectable for screen reader cursor, making the label not be read twice.

Also removed required Bool parameter for radio onCheck event, as it was uneccesary since a radio button may never be unchecked.

Added an optional aria label which may be passed to a radio button.

github-actions[bot] commented 3 years ago

Visit the preview URL for this PR (updated for commit 2ee9117):

https://atb-webshop-staging--pr374-dalum-fix-accessibil-c68vrxtq.web.app

(expires Sat, 04 Sep 2021 15:00:30 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

gorandalum commented 3 years ago

@tormoseng Tar du en test av denne? Den forsøker å forbedre opplevelsen med radio-knapper i skjermlesere. Dette er da endringer som får effekt for alle radio-knapper i nettbutikken, ikke bare de som vedrører lagring av betaling.

tormoseng commented 3 years ago

@gorandalum For eksisterende radioknapper: Det ser ut til at skjermleser leser opp "Avmerket" for selve radioknappen, men "Ikke valgt" for hele elementet inkl.label. Dette gjelder både TB og VO - dog med små variasjoner.

For lagrede betalingskort så ser/hører jeg vel litt av det samme som over, men mer konsekvent "Ikke valgt her".

Her er to videoer for TalkBack (Chrome). Regner med du får sjekka observasjonene selv på VoiceOver med Safari på iOS.

https://user-images.githubusercontent.com/5812433/131847635-d7f7052e-7fa2-4ae1-b19c-7de62b98783e.mp4

https://user-images.githubusercontent.com/5812433/131847719-bbd652e6-9165-4f19-8dcc-b6ab643d9b65.mp4

tormoseng commented 3 years ago

@gorandalum Mine auto-sjekker klager på alle radioknappene med følgende:

ARIA hidden element must not contain focusable elements https://dequeuniversity.com/rules/axe/4.2/aria-hidden-focus?application=axeAPI

tormoseng commented 3 years ago

Re-testet OK