Focus states don't work on checkbox inputs

[andrico1234]

What you were expecting:
WHen navigating through the CheckboxGroupInput inputs, there should be a visible indicator when using the TAB key

What happened instead:
No way to indicate which of the checkboxes is focused

Steps to reproduce:
Navigate to the post page
Tab through the page
Observe the lack of styles on focus

This is likely due to the styles being applied to the focus pseudo class of the span element. But the span element isn't focusable via keyboard. Instead we should leverage the focus-within pseudo class to display focus styles if the child input element is focused

I can create a quick PR for this

insert short code snippets here

Other information:

Environment

• React-admin version:
• Last version that did not exhibit the issue (if applicable):
• React version:
• Browser:
• Stack trace (in case of a JS error):

[andrico1234]

Interestingly enough, it actually might have something to do with the Mui-focusVisible class. The class is being added as expected, but the styles aren't being applied

[andrico1234]

After a little more digging, it would appear that it's a result of the disableRipple being applied in defaultTheme

[andrico1234]

Note: This is something we can easily add in userland, but felt it best to fix it here, since it's a major accessibility issue

[antoinefricker]

Thanks for your report and for the fix you have provided!

[fzaninotto]

If the cause is the disableRipple (which we added for performance reasons), then we should remove this disableRipple, and let developers looking for performance re-add it in userland if they want.