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

Accessibility/Inputs: Update focus color to an accessible one. #68

Open
rymorgan opened this issue Aug 19, 2019 · 2 comments
Open

Accessibility/Inputs: Update focus color to an accessible one. #68

rymorgan opened this issue Aug 19, 2019 · 2 comments
Labels
discussion For issues in which discussion is expected but no further action is needed

Comments

@rymorgan
Copy link
Contributor

Type: breaking|critical|major|minor
Minor

Describe the bug
Our current focus color doesn't meet accessibility guidelines and needs to be updated to a color that meets contrast guidelines.

To Reproduce
Click tab to get a focus ring.

Screenshots
If applicable, add screenshots to help explain your problem.
Screen Shot 2019-08-19 at 12 08 41 PM

Additional context
Add any other context about the problem here.

@machikoyasuda
Copy link
Contributor

Just for documentation's sake, this is what our Catalyst Button focus states look like now:

Screen Shot 2019-08-19 at 2 35 56 PM

Screen Shot 2019-08-19 at 2 35 58 PM

Screen Shot 2019-08-19 at 2 35 54 PM

This is what it looks like on some Reaction Admin MUI components:
Screen Shot 2019-08-19 at 2 35 18 PM

@machikoyasuda machikoyasuda added the discussion For issues in which discussion is expected but no further action is needed label Aug 23, 2019
@machikoyasuda
Copy link
Contributor

For the Select, we chose dark blue for focus, the same color that shows up when you click on the select:

Screen Shot 2019-08-30 at 3 42 37 PM

For Tabs, focus looks similar to the Button:
Screen Shot 2019-08-30 at 3 43 01 PM

For Chip, it looks like this middle one:
Screen Shot 2019-08-30 at 3 43 26 PM

The Deletable Chip is problematic b/c the Deletable Chip's X button does not have a focus state so it's impossible to close it with a keyboard key.

@machikoyasuda machikoyasuda changed the title Update focus color to an accessible one. Accessibility/Inputs: Update focus color to an accessible one. Aug 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion For issues in which discussion is expected but no further action is needed
Projects
None yet
Development

No branches or pull requests

2 participants