What's the problem? 🤔

When you use the disableRipple: true, property on the theme.components as such

    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },

Then all of the components that rely on the Mui-focusVisible class for ripple styling become unaccessible. When you focus them with keyboard nothing happens, you can't tell they are focused.

Ripple	Disabled Ripple

What are the requirements? ❓

There needs to be some kind of fallback on that. I did that in my app and was left scratching my head for a while, why nothing is working, including:

• Radio Buttons
• Checkboxes
• Buttons

What are our options? 💡

What I have done in my app is a global style to the:

.Mui-focusVisible: {
outline: 2px solid #000
}

There should be some fallback

Proposed solution 🟢

I am unaware of the internals of MUI and someone with more knowledge should propose a solution. My solution to my application is what I wrote in the "What are our options? 💡" section.

Resources and benchmarks 🔗

No response