search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.03k stars 32.3k forks source link

[material-ui] Focus-visible state does not meet WCAG AA across the system #41653

Open amhci opened 8 months ago

amhci commented 8 months ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/brave-monad-ld2t5t

Steps:

  1. Open CodeSandbox link.
  2. Click inside the Preview pane.
  3. Hit tab; it will work despite the backdrop.
  4. Tab between "default theme" and "contrast theme" and activate with enter.

Current behavior

I created a little demo to demonstrate this issue using a Backdrop component to lighten and blur everything. This of course is not a completely accurate reproduction of low vision, but I do think that reducing the contrast of the entire UI + a blur is a very demonstrative simulation of how your visual state indicators can perform for users with low vision.

Across the entire Material UI component library, the vast majority, if not all of them fail WCAG AA when it comes to indicating a visible focus state. I couldn't find any passing examples... text fields are almost there because their outlines do meet 3:1, but the text labels have a higher ratio and they fail (see #40841). In most components the ripple effect is used to indicate a visible focus state. Then in menus and others like accordion and TreeView (see #12559), a light change in background color is used for the focus state.

Here's a quick screen recording of the current visual indication on a few components: https://github.com/mui/material-ui/assets/98350973/7342d781-30e5-498a-8834-a69b3039cf53

Expected behavior

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html has the rundown. Essentially, whatever you are using to indicate focus must have a 3:1 contrast ratio with its surroundings.

The conventional way to indicate focus is with a border/outline/ring, as this is the default in browsers. I think that if you are going to deviate from that convention, your indication needs to be at least as visually distinct as a focus ring. The ripple or background color change, with the current colors, is very noticeably more subtle. Some components fare better than others: the animation of the ripple in the button for example really helps it pop, and the thumb on a slider is noticeably really hard to see. But as said, none of them pass WCAG.

Here's an example of how using a focus ring to indicate is easier to see: https://github.com/mui/material-ui/assets/98350973/84cd4e90-184f-4faa-9964-527e215e3cd3

Context

First up, I found a few issues that mention this problem on individual components (e.g. #28543 and the one about input contrast I linked above) and I filed a new one for TreeView. I am filing this issue because as far as I can tell, there is no ticket for the over-arching design pattern of focus-visible across the entire system-- please correct me if I'm mistaken!

I hope the team can take a look at this as not just a technical violation of some threshold in a spec. This is a fundamental issue to how you have decided to indicate focus across the entire system and it leaves people behind.

I do understand that MUI is implementing Material Design. I am not an expert on that system and I have not taken the time to research what it says on this topic to understand the starting point you are working with. Perhaps this design pattern comes from Google and not even MUI. That said, at the end of the day this is not accessible.

I have been working around this in my own implementation of MUI, and well, it's work. Furthermore, I'd expect the vast majority of MUI devs are not going to do this-- so we know the user impact is huge.

If I can be blunt, this design pattern fundamentally goes against MUI's stated dedication to accessibility. I hope with all the new work you have announced for this year, this problem can be prioritized and a solution implemented!

I honestly think your best bet is to go with a focus ring everywhere. A huge advantage of this is it makes it very easy to universally add more distinction by having a single color to customize for even more visual contrast:

https://github.com/mui/material-ui/assets/98350973/073716bc-2354-459b-adf6-d368507b2b30 https://github.com/mui/material-ui/assets/98350973/eb51335f-8586-4fe1-ae50-9e9ed1e29a7a

Your environment

Affects all environments.

Search keywords: wcag contrast a11y focus

brijeshb42 commented 8 months ago

@danilo-leal @zanivan You want to take look here from design perspective?

danilo-leal commented 8 months ago

Hey @amhci, thanks for the detailed issue & interesting repro! I think you sort of nailed the problem here:

I do understand that MUI is implementing Material Design. [...] Perhaps this design pattern comes from Google and not even MUI. That said, at the end of the day this is not accessible.

The problem is essentially the Material Design 2 spec, and I'd agree that the way they design it is not the best one and far from the most usual ("the ring" approach, usually done with outline or box-shadows). From the top of my head, I can't remember if there were debates about whether we should've followed the MD2 design or not due to the accessibility impact, but I'm also, either way, keen to improve it. In any case, what I can tell you right now is that we'll most likely not tackle this in the upcoming major, v6. We're planning to make all major design changes in the v7 cycle. I'll make sure to follow up here once we get to it!