[Switch] Improve design across libraries

[oliviertassinari]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

• Joy UI: open https://mui.com/joy-ui/react-switch/#introduction. It renders <Switch color="primary" />. Same in https://codesandbox.io/s/aged-haze-rjcfir?file=/demo.tsx
• Base UI: https://mui.com/base/react-switch/#introduction
• Material UI: https://mui.com/material-ui/react-switch/#introduction

Current behavior 😯

By order of what seems to be the most important to fix first:

1. Joy UI. No active color contrast difference

2. Joy UI. No toggle animation

https://github.com/mui/material-ui/assets/3165635/1586d47b-4cc7-4a89-b6aa-ea81699965a8

3. Joy UI, Material UI, Base UI. No focus visible style when using Space to toggle.

https://github.com/mui/material-ui/assets/3165635/51940248-256d-4911-b5d9-961448a71dd8

Expected behavior 🤔

These design issues fixed.

Context 🔦

I opened this issue as part of an ongoing effort to focus on design execution.

cc @michaldudak as the owner of this component https://www.notion.so/mui-org/Components-Inputs-ecd48c9afe354bda8ecda3e96abc8c3c (also now that we have more team members we could consider splitting down the ownership areas). Now this both impacts Joy UI, Base UI, and Material UI.

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

[gitstart]

@oliviertassinari I would like to work on this

[danilo-leal]

Should we separate this issue into smaller, focused, ones? The first thing there from Joy looks like a bug. The second is more of an enhancement/polish, and the third could also be considered a bug/missing a11y-related treatment.

[mnajdova]

Should we separate this issue into smaller, focused, ones? The first thing there from Joy looks like a bug. The second is more of an enhancement/polish, and the third could also be considered a bug/missing a11y-related treatment.

Agree, @siriwatknp, @DiegoAndai, @michaldudak would you like to go trough the issue and create one for each of the packages?

[DiegoAndai]

@mnajdova I'll create Material's issue. Before that, let me know if I understand the issue correctly: The issue is that the focus-visible style is not applied when using space to toggle right after toggling the Switch via clicking it, right?

I'm seeing that when using space after getting to the Switch via tabbing, it works as expected.

cc: @danilo-leal

[michaldudak]

FYI, when mui/material-ui#37303 lands, the logic behind focus-visible in Switch will change slightly. Let's wait with further fixes until it's merged.

[oliviertassinari]

Should we separate this issue into smaller, focused, ones?

This issue could be considered an umbrella issue. I think that it depends, if the owner of the <Switch> component is taking on this issue, it might not be necessary to split.

[oliviertassinari]

To be fair, on point 1. there are use cases, but I believe these should be part of the long tail of customization needs, e.g.

https://github.com/mui/material-ui/assets/3165635/a01afb8c-97c8-467f-8594-3ad5517f394e

https://bitly.com/pages/pricing

[danilo-leal]

☝️ Interesting, thanks for sharing it! I was also thinking that the track not changing its color was mostly a bug but it might indeed make sense to support it but not as the default behavior, I'd say.