[material-ui][StepButton] Focus indicator lacks contrast in dark mode

[mleitzelldf]

Steps to reproduce

Link to live example: https://mui.com/material-ui/react-stepper/#non-linear

Steps:

1. Nav to https://mui.com/material-ui/react-stepper/#non-linear
2. Set the theme to dark mode from the settings drawer located at the top right of the page
3. Use the keyboard to focus one of the step buttons in the "Non-linear" demo

Current behavior

The focus indicator is barely visible to the user. The indicator is dark and blends in with the dark mode background.

Expected behavior

The user should be able to clearly see what has focus when they tab to a StepButton. Button focus indicators are visible in dark mode; I envision StepButton focus working similar to that.

Context

No response

Your environment

No response

Search keywords: Stepper StepButton dark focus

[DiegoAndai]

@zanivan may I ask you to take a look at this one? If there's something to fix, it might make sense to do it with MD3.

[zanivan]

@zanivan may I ask you to take a look at this one? If there's something to fix, it might make sense to do it with MD3.

Since MD3 doesn’t have a StepButton, we’ll need to adapt this component anyway. If we keep the same structure, we can apply the Button styles, which means using the same Focus style. In other words, MD3 will likely resolve this by updating the Button component.

[DiegoAndai]

Makes sense 👌🏼 so then this is not only a StepButton issue but a Button issue, right?

[zanivan]

@DiegoAndai I believe the issue is on the way we styled ButtonBase on StepButton component (correct me if I'm wrong, since I don't know exactly how the Ripple effect works):

  [`& .${stepButtonClasses.touchRipple}`]: {
    color: 'rgba(0, 0, 0, 0.3)',
  },

Since the focus in MD3 is not the Ripple effect anymore, I believe we'll fix this when tweaking the focus style for the button as well.

[DiegoAndai]

I believe we'll fix this when tweaking the focus style for the button as well.

This makes sense, adding it to the milestone 👌🏼