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.

Sign up for GitHub

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

Jump to bottom

Accessibility fix for checkbox #133

Closed
tiiavalt opened this issue Mar 4, 2021 · 0 comments · Fixed by #134
Closed

Accessibility fix for checkbox #133

tiiavalt opened this issue Mar 4, 2021 · 0 comments · Fixed by #134
Assignees
@tiiavalt
Labels
bug Something isn't working

Comments

@tiiavalt
Copy link
Contributor

tiiavalt commented Mar 4, 2021

Describe the bug
It's impossible to navigate to input checkbox because it has display: none. Navigation is broken with keyboard and with screen reader. Clicking the checkbox is possible because the visible part of the checkbox is done with svg and the true checkbox (input element) is hidden.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Series All build page
  2. Use tab key and try to navigate to the checkboxes under the header Hide tests that are
  3. See that checkbox doesn't receives focus

Expected behavior
Checkbox should be navigable and it should have visible focus styles.
@tiiavalt tiiavalt added the bug Something isn't working label Mar 4, 2021
@tiiavalt tiiavalt self-assigned this Mar 4, 2021
tiiavalt added a commit that referenced this issue Mar 4, 2021
@tiiavalt
#133 - Make checkbox accessible by hiding the input with opacity rath…
fa43b90 
…er than display + tweak focus styles
tiiavalt added a commit that referenced this issue Mar 4, 2021
@tiiavalt
#133 - Rename 'Checkbox' to match its filename because it's not a pla…
315997d 
…in checkbox component
@tiiavalt tiiavalt linked a pull request Mar 4, 2021 that will close this issue
Bug/133 - Checkbox accessibility fix #134
Merged
tiiavalt added a commit that referenced this issue Mar 5, 2021
@tiiavalt
#133 - Make checkbox accessible by hiding the input with opacity rath…
815f0a6 
…er than display + tweak focus styles
tiiavalt added a commit that referenced this issue Mar 5, 2021
@tiiavalt
#133 - Rename 'Checkbox' to match its filename because it's not a pla…
53c2016 
…in checkbox component
koops9 pushed a commit that referenced this issue Mar 12, 2021
@tiiavalt
Bug/133 - Checkbox accessibility fix (#134)
28d410b 
* #133 - Make checkbox accessible by hiding the input with opacity rather than display + tweak focus styles

* #133 - Rename 'Checkbox' to match its filename because it's not a plain checkbox component
@vade5g vade5g closed this as completed Mar 12, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tiiavalt tiiavalt

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Bug/133 - Checkbox accessibility fix salabs/Epimetheus
2 participants
@vade5g @tiiavalt