Skip to content

fix: add missing focus state styling to buttons and checkboxes #10614

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

Merged
merged 4 commits into from
Nov 13, 2023

Conversation

Parkreiner
Copy link
Member

@Parkreiner Parkreiner commented Nov 9, 2023

Closes #9855 and adds a couple of other changes, too.

Changes made

  • Adds visual focus state to all checkboxes
  • Adds visual focus state to all switches
  • Adds visual focus state to all icon buttons
Screenshot 2023-11-09 at 2 58 28 PM Screenshot 2023-11-09 at 2 58 46 PM Screenshot 2023-11-09 at 2 58 16 PM

There might be some other components that need similar updates, but this should help keyboard navigation in the site a lot.

@Parkreiner Parkreiner self-assigned this Nov 9, 2023
@Parkreiner Parkreiner changed the title Mes/bugs/focus state fix: add visual focus state to buttons and checkboxes Nov 9, 2023
* make the styling more obvious, even if there's not much room for
* customization).
*/
"&.Mui-focusVisible": {
Copy link
Member Author

@Parkreiner Parkreiner Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Long comment, but trying all these selectors and seeing what exactly was happening is the reason this PR took so long. Wanted to try preventing other people from going down this rabbit hole

@Parkreiner Parkreiner changed the title fix: add visual focus state to buttons and checkboxes fix: add missing focus state styling to buttons and checkboxes Nov 9, 2023
@Parkreiner Parkreiner requested review from a team and aslilac and removed request for a team November 9, 2023 19:55
@Parkreiner Parkreiner marked this pull request as ready for review November 9, 2023 20:02
@matifali
Copy link
Member

That's super nice. Will improve the accessibility for sure.

@Parkreiner Parkreiner removed the request for review from aslilac November 13, 2023 13:07
Copy link

@cdr-bot cdr-bot bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PR is a hotfix and has been automatically approved.

  • ✅ Base is main
  • ✅ Has hotfix label
  • ✅ Head is from coder/coder
  • ✅ Less than 100 lines

@Parkreiner Parkreiner merged commit e4211cc into main Nov 13, 2023
@Parkreiner Parkreiner deleted the mes/bugs/focus-state branch November 13, 2023 13:08
@github-actions github-actions bot locked and limited conversation to collaborators Nov 13, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

A11y: Not all checkboxes have visible focus state
2 participants