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

fix: checkbox accessibility #23

Merged
merged 6 commits into from
Jun 21, 2019
Merged

fix: checkbox accessibility #23

merged 6 commits into from
Jun 21, 2019

Conversation

jsomsanith-tlnd
Copy link
Contributor

What is the problem this PR is trying to solve?
Checkbox component is not accessible

  1. non focusable and ignored by SR because of visibility: hidden
  2. label is not required
  3. errors are set as labels
  4. checkbox with errors are not set as invalid
  5. missing focus visual aspect for keyboard navigation

What is the chosen solution to this problem?

  1. make input visible again, but outside of viewport
  2. label is required, introducing hideLabel props. Be careful to give a clear context when you hide the label in the designs
  3. errors are in a div next to the label, associated with input via aria-describedby
  4. use aria-invalid on input when there is an error
  5. TODO

@domyen
Copy link
Member

domyen commented Jun 20, 2019

Thanks, I'll work on 5 tomorrow and commit updates to this branch 👍

@domyen domyen merged commit c744f2d into master Jun 21, 2019
@domyen domyen deleted the jsomsanith/fix/checkbox_a11y branch June 21, 2019 14:53
@kylesuss
Copy link
Collaborator

🚀 PR was released in v0.0.26 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants