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.31k forks source link

Stepper lacks accessibility #43689

Open jacklaurencegaray opened 2 months ago

jacklaurencegaray commented 2 months ago

Summary

When navigating the Stepper component with voice assistant and keyboard-only navigation, it doesn't read out which step you're currently in when you go to the next step. It also doesn't hint the user how many steps there are in total.

Examples

No response

Motivation

No response

Search keywords: Stepper lacks accessibility

siriwatknp commented 2 months ago

Thanks for reporting the issues. This is one of the thing to improve for sure, ref https://ishadeed.com/article/stepper-component-html-css/.

jacklaurencegaray commented 2 months ago

Thanks for reporting the issues. This is one of the thing to improve for sure, ref https://ishadeed.com/article/stepper-component-html-css/.

Seems like this example website is also inaccessible, it achieves the Stepper as a UI but voice assistant + keyboard navigation is still not there. The current Stepper in MUI in production is even better than this one imo. Here are a few specs I feel could make the Stepper more accessible for voice-overs:

when focusing on the whole stepper: tell the user they are in a stepper, tell them how many steps there are when focusing on a step: tell the user which step they're in and in what order (e.g you are in 2nd step) when finishing the steps: tell them they've finished all steps

aarongarciah commented 2 months ago

Thanks for reporting, @jacklaurencegaray. We'll most probably migrate components to Base UI in Material UI v7. Until then, we'll accept community contributions for improvements in the Stepper component (as long as they don't introduce breaking changes).