material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

Published 20 hours ago • verified publisher icon mui

Button focus visible a11y issue

Open sebascomeau opened this issue 3 years ago • 6 comments

  • [x] The issue is present in the latest release.
  • [x] 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.

image

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

sebascomeau avatar Sep 22 '21 17:09 sebascomeau

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

mnajdova avatar Sep 24 '21 06:09 mnajdova

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.

danilo-leal avatar Sep 24 '21 13:09 danilo-leal

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.

sebascomeau avatar Sep 24 '21 13:09 sebascomeau

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.

eps1lon avatar Sep 30 '21 09:09 eps1lon

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

schopra8 avatar Aug 23 '22 16:08 schopra8

@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.

mnajdova avatar Sep 20 '22 10:09 mnajdova

@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

ranjithsai avatar Sep 27 '23 23:09 ranjithsai