[material-ui][Rating] Screen reader announces incorrect value for maximum amount of stars

[tuomastalvensaari]

Steps to reproduce

Link to live example: https://codesandbox.io/embed/dazzling-surf-4dgzp6?fontsize=14&hidenavigation=1&theme=d

Prerequisites

• A screen reader application, e.g. NVDA (Windows) or Voiceover (IOS), is used

Steps:

1. Click on one of the stars (1-5) to give a rating, say the 2nd star to give a two-star rating

Current behavior

The screen reader announces the maximum value of the rating incorrectly.

Firefox

The screen reader announces "two of six", when max amount is actually 5.

Presumably, the value 6 comes from the number of radio inputs (on for each star, one for zero stars) in the component. By adding aria-hidden="true" with developer tools to the zero input, the max value is read correctly.

Chrome, Edge

The screen reader announces "two of seventeen" (!).

For these browsers, the number 17 perhaps comes from the number of inputs on the page?

Expected behavior

The screen reader should announce the max. value correctly, "two of five" in this case.

Context

We use MUI Rating to allow users to provide feedback on the digital services of a large public sector institution. The accessibility of the services is naturally very important.

Your environment

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.5.1 - C:\Program Files\nodejs\node.EXE npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (123.0.2420.97) npmPackages: @emotion/react: 11.10.5 => 11.10.5 @emotion/styled: 11.10.5 => 11.10.5 @mui/base: 5.0.0-beta.18 @mui/core-downloads-tracker: 5.14.10 @mui/icons-material: 5.11.9 => 5.11.9 @mui/material: 5.11.9 => 5.11.9 @mui/private-theming: 5.14.10 @mui/styled-engine: 5.14.10 @mui/system: 5.14.10 @mui/types: 7.2.5 @mui/utils: 5.14.12 @mui/x-date-pickers: 6.16.1 => 6.16.1 @types/react: 18.2.20 => 18.2.20 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.2.2 => 5.2.2 ```

Search keywords: rating nvda reader

[mj12albert]

The screen reader announces "two of seventeen" (!). For these browsers, the number 17 perhaps comes from the number of inputs on the page?

@tuomastalvensaari Thanks for reporting this, have you tried using the getLabelText prop to set aria-label? That may help the the announcements:

<Rating defaultValue={3} getLabelText={(value) => `${value} of 5`} role="radiogroup" />

The screen reader announces "two of six", when max amount is actually 5.

I can confirm that adding aria-hidden on the "empty" input fixes this for VO (in Edge and Safari) without affecting the functionality, would you be interested in a creating a PR?

[tuomastalvensaari]

@tuomastalvensaari Thanks for reporting this, have you tried using the getLabelText prop to set aria-label? That may help the the announcements:

Yes, I tried it, but it didn't have effect on the max value announced by NVDA.