Repository: material-ui
Issue: [material-ui] Focus-visible state does not meet WCAG AA across the system
Labels: accessibility,package: material-ui

### 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