-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
[Switch] focused, OFF switch should have a dark grey indicator, instead of white #13799
Comments
It's not just the Switch specification that we need to update, the Radio and the Checkbox. |
@oliviertassinari And the Radio is working currently in a way, it avoids this focused, but not selected state, because if I press tab, it jumps to the next element, not the next selectable Radio value, so I can only change the active selection with my keyboard arrows. For me, only the Switch, which is causing problems. |
We don't have a good solution for full spec compliance. Handling this case would make the implementation significantly more complex, making overrides a lot more harder. |
This isn't fixed, why is it closed? How is changing a color "significantly complex"? Why does compliance with the MD specs have a low ROI for Material UI? |
@leMaik If you find a solution that doesn't make overrides a lot harder, I would be happy to move forward. I couldn't find any, but someone else might. |
The Switch component has a white circle focus indicator in OFF state instead of a dark grey one.
Expected Behavior 🤔
The focused switch in OFF state should look like this:
https://material.io/design/components/selection-controls.html#switches
Current Behavior 😯
The focus indicator is white-ish, instead of grey. Because of this, it is nearly impossible to tell in a UI with white background, which switch is in focus.
Steps to Reproduce 🕹
You can reproduce it simply by switching the "Primary" (the second one) switch, and hiting the "tab" key.
https://codesandbox.io/s/3yo0vqrr1p
You can see, the indicatot is rendered, but it is extremely hard to see, because it is almost a white color on a white backgrond.
You can see this behaviour better, if you set a different background color.
Context 🔦
I have a white form, where I would like to use switches with keyboard.
Your Environment 🌎
The text was updated successfully, but these errors were encountered: