mui / mui/material-ui

[rating] Screen reader announces incorrect value for maximum amount of stars

Open
#42,562 5 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

accessibility has workaround scope: rating type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.