Skip to content

A11y: Not all checkboxes have visible focus state #9855

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
Closed
Parkreiner opened this issue Sep 25, 2023 · 1 comment · Fixed by #10614
Closed

A11y: Not all checkboxes have visible focus state #9855

Parkreiner opened this issue Sep 25, 2023 · 1 comment · Fixed by #10614
Assignees
@Parkreiner
Labels
good first issue Easily solved issues suitable for starters and community contributors s2 Broken use cases or features (with a workaround). Only humans may set this. site Area: frontend dashboard

Comments

@Parkreiner
Copy link
Member

Parkreiner commented Sep 25, 2023 •
edited
Loading

This is more of an issue for users navigating the site with a keyboard (Tab or Shift+Tab). At the very least, it affects all the checkboxes in the Workspaces view.

Screen.Recording.2023-09-25.at.9.26.39.AM.mov

When a checkbox has focus, there is no visual indicator. So, you can use your keyboard for most of the interactive elements, but the moment focus shifts to the checkbox, it's not clear where you are, or what pressing Space/Enter will do.

Should hopefully be a straightforward fix. Only obvious pitfall to me is that you have to make sure focus styling is defined before hover styling or active styling in the CSS cascade
@Parkreiner Parkreiner added site Area: frontend dashboard s3 Bugs that confuse, annoy, or are purely cosmetic bug good first issue Easily solved issues suitable for starters and community contributors labels Sep 25, 2023
@Parkreiner Parkreiner assigned Parkreiner and unassigned Parkreiner Sep 30, 2023
@Parkreiner
Copy link
Member Author

Going to de-prioritize this one and un-assign myself for this week, especially since the choice of focus color is partly tied to the discussions we've been having lately about all the colors for the site.

Once the colors and general color schemes are decided, I think this would take no more than a few hours of work

@Parkreiner Parkreiner removed their assignment Oct 9, 2023
@Parkreiner Parkreiner added the s2 Broken use cases or features (with a workaround). Only humans may set this. label Nov 1, 2023
@cdr-bot cdr-bot bot removed the s3 Bugs that confuse, annoy, or are purely cosmetic label Nov 1, 2023
@Parkreiner Parkreiner self-assigned this Nov 1, 2023
@Parkreiner Parkreiner mentioned this issue Nov 9, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Parkreiner Parkreiner

Labels
good first issue Easily solved issues suitable for starters and community contributors s2 Broken use cases or features (with a workaround). Only humans may set this. site Area: frontend dashboard
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: add missing focus state styling to buttons and checkboxes coder/coder
1 participant
@Parkreiner