[Switch] .Mui-focusVisible is set on a wrong element

[michaldudak]

The Mui-focusVisible class is applied to the Unstyled Switch's root element, even though it's not a focused element. The real DOM focus is placed on the input inside the root. In this case, the .Mui-focusVisible and :focus-visible selectors don't point to the same element. It can be problematic when we want to remove the useIsFocusVisible hook. It could also be surprising for developers who wish to rely on the native property instead of the workaround useIsFocusVisible offers.

One possible solution would be to replace input type="checkbox" with input type="hidden" (or input type="checkbox" hidden) and make the root element focusable. It would require handling clicks and keypresses by the component (instead of delegating this to the native checkbox).

The Material UI component is also affected by this.

[trizotti]

Hello, @michaldudak ! I was trying to test the possible solution from your suggestion and opened a draft PR (#35744) (ignore the messy code, it's just a experiment):

1. I changed the input to hidden;
2. I allowed the root element (which already receives the Mui-focusVisible class) to be focusable;
3. I set the handle of focus, clicks and keyboard interactions directly to the root element of the component;

Current result:

Click, keyboard interaction and focus are fine. The component works as normal;

What's missing?

The onChange event won't fire because the input is hidden.

I have a question:

Once the toggle is not handled by the input itself anymore, the event is not triggered automatically.
If the input stays hidden, how could I fire the onChange event correctly?

Thanks in advance

[michaldudak]

Hi @trizotti. You will likely need to trigger the event manually, similarly to how SelectInput does it (https://github.com/mui/material-ui/blob/3bde8db383f61897e8710657f05d36a2f27737aa/packages/mui-material/src/Select/SelectInput.js#L286-L298)

[nicolas-ot]

I will try to solve this issue

[michaldudak]

This issue is not relevant anymore, as we changed the Switch structure and API substantially in #135. If there are any problems with the new implementation, feel free to open a new issue.