[Progress] Progress Indicators missing labels - Accessibility

[jcafiero]

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!

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

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]

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.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@jcafiero Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.