react icon indicating copy to clipboard operation
react copied to clipboard

`ProgressBar.Item` overrides `aria-valuemin`/`aria-valuemax`

Open rwe opened this issue 5 months ago • 0 comments

Description

ProgressBar.Item ignores any provided aria-valuemin/aria-valuemax, setting them to 0 and 100 respectively; which breaks aria attributes for quantified progress item that is not a percent — for example "count of things done out of count of things total".

This used to work, but was broken about 9 months ago in #4878 this commit: https://github.com/primer/react/commit/73312d8ceb98ae84c0291f05b0b30f7f06975d3c

which now splats the constructed ariaAttributes over those provided: https://github.com/primer/react/blob/ff6bf5cbe1b012b87b5b35af45b3e08b32d1df22/packages/react/src/ProgressBar/ProgressBar.tsx#L68C13-L68C27

Steps to reproduce

<ProgressBar aria-valuemin={0} aria-valuemax={12}>
  <ProgressBar.Item aria-valuemin={0} aria-valuemax={12} aria-valuenow={0 + 3} progress={3/12 * 100}>
  <ProgressBar.Item aria-valuemin={0} aria-valuemax={12} aria-valuenow={3 + 4} progress={4/12 * 100}>
</ProgressBar>

The progress bar items are rendered with aria-max={100}

Version

v37.27

Browser

No response

rwe avatar Jul 05 '25 22:07 rwe