Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox is not accessible #4607

Closed
3 of 4 tasks
charlag opened this issue Sep 23, 2022 · 1 comment · Fixed by #6158
Closed
3 of 4 tasks

Checkbox is not accessible #4607

charlag opened this issue Sep 23, 2022 · 1 comment · Fixed by #6158
Labels
a11y Accessibility related problems bug broken functionality, usability problems, unexpected errors state:tested We tested it and are about to release it
Milestone

Comments

@charlag
Copy link
Contributor

charlag commented Sep 23, 2022

The label is not associated with the checkbox. Since we can't really use static IDs we should instead nest checkbox inside the label.

Test Notes

  • Screen readers announce the checkbox identically to a standard checkbox element
  • Clicking on the checkbox's box toggles the state
  • Clicking on the checkbox's label toggles the state
  • The checkbox is still positioned correctly
@charlag charlag added bug broken functionality, usability problems, unexpected errors a11y Accessibility related problems labels Sep 23, 2022
@rezbyte rezbyte self-assigned this Nov 15, 2023
@wrdhub wrdhub added the state:done meets our definition of done label Nov 15, 2023
@bedhub bedhub added this to the 3.118.32 milestone Nov 20, 2023
@ganthern ganthern modified the milestones: 3.118.32, 3.119.0 Nov 27, 2023
@murilopereirame
Copy link
Contributor

murilopereirame commented Nov 28, 2023

The checkbox is misplaced in iOS and Android.
Double tapping the label works, but the user can't select the checkbox itself so easily, as it is behind the text (Android), that makes the screen reader not announce the state.

iOS

IMG_0074

Android

Screenshot_20231128-144947

@murilopereirame murilopereirame added the state:tested-with-comments Issue has been tested but some issues were found and needs review. label Nov 28, 2023
@ganthern ganthern removed the state:tested-with-comments Issue has been tested but some issues were found and needs review. label Dec 1, 2023
@ganthern ganthern self-assigned this Dec 1, 2023
@ganthern ganthern added state:tested We tested it and are about to release it and removed state:done meets our definition of done labels Dec 1, 2023
@ganthern ganthern removed their assignment Dec 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility related problems bug broken functionality, usability problems, unexpected errors state:tested We tested it and are about to release it
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants