react
react copied to clipboard
`ProgressBar.Item` overrides `aria-valuemin`/`aria-valuemax`
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