[material-ui][Button] Provide an accessible focus alternative when `disableRipple` prop is set

[dimitur2204]

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

[kachar]

@dimitur2204 Sorry for the dull question but why do we want to disable the standard ripple effect instead of customizing it to our needs for example?

Here's a simple example https://codesandbox.io/s/mui-change-global-ripple-color-forked-zk0xr3

[dimitur2204]

@dimitur2204 Sorry for the dull question but why do we want to disable the standard ripple effect instead of customizing it to our needs for example?

Here's a simple example https://codesandbox.io/s/mui-change-global-ripple-color-forked-zk0xr3

@kachar The ripple controls both the click ripple and the focus ripple. It's a common case to not want the click ripple, but by doing that you render everything that uses the focus ripple inaccessible

[dimitur2204]

@michaldudak It seems like it is stated in the API for the Button Base https://mui.com/material-ui/api/button-base/#props.

[michaldudak]

As you noticed, it is an expected and documented behavior. If you disable the ripple, you have to provide your own styles for the focus state.
We can't really do much to this in v5, as it may break users who depend on this, but we are going to change this in v6 (by replacing the focus ripple with a different background shade).