search

opengovsg / FormSG

Form builder for the Singapore Government
https://form.gov.sg
Other
256 stars 78 forks source link

a11y: Rating reads as Unticked on iOS Voiceover during and after being selected #5787

Open foochifa opened 1 year ago

foochifa commented 1 year ago

Describe the bug

For rating field:

On iOS Voiceover, whether it is selected or not, the rating icon reads unticked, e.g. '4 star, Radio button, unticked, 4 of 5'

When selected, it reads 'unticked' And when hovered over the selected radio button, it reads out again the same line of '4 star, Radio button, unticked, 4 of 5'

Expected behavior

Upon selecting the rating button, it should read 'ticked', and when hovered over, it should read '4 star, Radio button, ticked, 4 of 5'

Additional context Linked to previous issue #5503 by @pearlyong and @staceytan1998

foochifa commented 1 year ago

iOS Voiceover seems a little buggy too. For our radio fields, if radio button is selected it will read 'ticked' however, when you unselect it again it will read 'ticked' still instead of 'unticked'

foochifa commented 1 year ago

This doesn't seem to be because of aria-checked label, as the label gets updated correctly using browser stack's dev tool to inspect the element on iPhone 14