search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.44k stars 31.84k forks source link

[Progress] Progress Indicators missing labels - Accessibility #26900

Open jcafiero opened 3 years ago

jcafiero commented 3 years ago

When running automated jest axe scans for our internal use of the MUI Progress Indicators, we encountered failures for our implementation. I noticed these failures were also happening on the Material UI docs page, as there are no labels associated with these examples. These errors are related to both the CircularProgressIndicator examples and the LinearProgressIndicator examples. Not sure if the best outcome is actually adding labels to these examples, or making a note about this in an accessibility section on the page. I'd be happy to contribute a PR for whatever fix the team feels would beneficial to the documentation!

Current Behavior 😯

When running an automated axe scan on the page https://material-ui.com/components/progress/, there are serious failures for each of the examples on the page regarding the "ARIA progressbar nodes must have an accessible name" rule.

Expected Behavior 🤔

There should be no axe scan issues for the specified rule. Each Progress Indicator should have an associated label. For the Customized Circular Progress example, the grey background circle should have aria-hidden set to true to prevent the second progress indicator from being read by screen readers, as that example is comprised of two CircularProgress components laid on top of each other.

Steps to Reproduce 🕹

Steps:

  1. Navigate to the Progress documentation (or the next release's Progress docs )
  2. Using the axe DevTools plugin, open the tool and run 'Scan All of My Page'.
  3. Note the Serious failures and use the Highlight feature to examine where these issues are occurring on the page.

Context 🔦

My team has internal demo docs for each of the MUI components, and we run automated a11y scans on each of our examples so that's how we encountered this. Our Design System team strives to give the other employees at our company fully accessible implementations that they can reference.

Your Environment 🌎

This is happening on the docs pages at both v4.11.1 and v5.0.0-alpha.37, but I've included my environment information as well.

`npx @material-ui/envinfo` System: OS: macOS 11.4 Binaries: Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm Browsers: Chrome: 91.0.4472.106 npmPackages: @emotion/styled: 10.0.27 @material-ui/core: ^4.11.4 => 4.11.4 @material-ui/data-grid: 4.0.0-alpha.21 => 4.0.0-alpha.21 @material-ui/icons: ^4.9.1 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.45 => 4.0.0-alpha.57 @material-ui/pickers: 4.0.0-alpha.9 => 4.0.0-alpha.9 @material-ui/styles: 4.11.4 @material-ui/system: 4.11.3 @material-ui/types: 5.1.0 @material-ui/utils: 4.11.2 @types/react: 17.0.3 react: ^16.11.0 => 16.14.0 react-dom: ^16.11.0 => 16.14.0
StylesTrip commented 5 months ago

Hello,

Wanted to reach out and see if anyone is working on this one? I know this issue hasn't been updated since 2021 but the issues laid out above are still present on the current page with the progressbars not having an accessible name.

If no one is, I'd be happy to try and take a stab at it.