[material-ui][Button] Focus visible a11y issue

[sebascomeau]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Button text color white with class Mui-focusVisible doesn't pass a11y.

https://color.a11y.com/ContrastPair/?bgcolor=5B93D3&fgcolor=ffffff

Steps to Reproduce 🕹

Steps:

1. go to https://mui.com/components/buttons/#main-content
2. focus on contained button

[mnajdova]

cc @danilo-leal you may be interested in taking a look at this

[danilo-leal]

cc @danilo-leal you may be interested in taking a look at this

@mnajdova The ripple focus color is defined automatically with opacity on the theme, isn't it?! I guess that reducing the opacity a bit would tackle this the right way.

[sebascomeau]

We disabled focus ripple on buttons at createTheme level and also set MuiButton.root outline to undefined to let the browser handle the outline for a11y. I think reducing the opacity could pass the a11y.

[eps1lon]

Note that the contrast ratio may have to hit 3:1 to pass WCAG 2.2 AA: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html

I'm not sure if a smaller area that is that thick is sufficient.

[schopra8]

Hi team, is there any workaround at the moment that allows us to change the opacity used in the ripple effect? Thanks, in advance!

[mnajdova]

@schopra8 you can override it by adding the touch ripple classes, here is a short demo: https://codesandbox.io/s/affectionate-jerry-7uqf81?file=/src/App.tsx

You can check the TouchRipple.js source for more info/inspiration.

[ranjithsai]

@mnajdova @danilo-leal I guess reducing the opacity for ripple effect would meet contrast ratio. But then what about WCAG 2.4.11 focus appearance? I see these examples from WCAG guidelines clearly showing how it can be. I'm trying to understand where the current MUI buttons stand among these examples.

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html