Closed gorandalum closed 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 🌎
@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.
@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
@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
Re-testet OK
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.