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

[Switch] focused, OFF switch should have a dark grey indicator, instead of white #13799

Closed
2 tasks done
HsM02 opened this issue Dec 4, 2018 · 5 comments
Closed
2 tasks done
Labels
component: switch This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future)

Comments

@HsM02
Copy link

HsM02 commented Dec 4, 2018

The Switch component has a white circle focus indicator in OFF state instead of a dark grey one.

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The focused switch in OFF state should look like this:
expected

https://material.io/design/components/selection-controls.html#switches

Current Behavior 😯

current
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 🌎

Tech Version
Material-UI v3.6.1
React 16.6.3
Browser any
@oliviertassinari oliviertassinari added design: material This is about Material Design, please involve a visual or UX designer in the process component: switch This is the name of the generic UI component, not the React module! new feature New feature or request component: checkbox This is the name of the generic UI component, not the React module! component: radio This is the name of the generic UI component, not the React module! labels Dec 4, 2018
@oliviertassinari
Copy link
Member

It's not just the Switch specification that we need to update, the Radio and the Checkbox.

@HsM02
Copy link
Author

HsM02 commented Dec 4, 2018

@oliviertassinari
The Checkbox is looking fine for me from this issue's aspect.
Actual:
checkbox
Spec:
checkbox spec
Sandbox:
https://codesandbox.io/s/2n4jqmp0r

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.
https://codesandbox.io/s/p9rj741r80

For me, only the Switch, which is causing problems.

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 31, 2019

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.

@leMaik
Copy link
Member

leMaik commented Mar 31, 2019

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?

@oliviertassinari oliviertassinari added out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future) and removed low priority labels Mar 31, 2019
@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 31, 2019

@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.

@oliviertassinari oliviertassinari removed new feature New feature or request component: checkbox This is the name of the generic UI component, not the React module! component: radio This is the name of the generic UI component, not the React module! labels Mar 31, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: switch This is the name of the generic UI component, not the React module! design: material This is about Material Design, please involve a visual or UX designer in the process out of scope The problem looks valid but we won't fix it (maybe we will revisit it in the future)
Projects
None yet
Development

No branches or pull requests

3 participants