diff --git a/.changeset/slimy-sloths-whisper.md b/.changeset/slimy-sloths-whisper.md new file mode 100644 index 00000000000..575b256e7b3 --- /dev/null +++ b/.changeset/slimy-sloths-whisper.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +fix(ProgressBar): add aria-valuetext attribute diff --git a/packages/react/src/ProgressBar/ProgressBar.tsx b/packages/react/src/ProgressBar/ProgressBar.tsx index 6c760bbd77d..9678af725f2 100644 --- a/packages/react/src/ProgressBar/ProgressBar.tsx +++ b/packages/react/src/ProgressBar/ProgressBar.tsx @@ -85,6 +85,7 @@ export const ProgressBar = forwardRef( 'aria-valuenow': progressAsNumber ? Math.round(progressAsNumber) : undefined, 'aria-valuemin': 0, 'aria-valuemax': 100, + 'aria-valuetext': progressAsNumber ? `${Math.round(progressAsNumber)}%` : undefined, } return ( diff --git a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap index e8f28759a8b..cd0422b606b 100644 --- a/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap @@ -38,6 +38,7 @@ exports[`ProgressBar respects the "progress" prop 1`] = ` aria-valuemax={100} aria-valuemin={0} aria-valuenow={80} + aria-valuetext="80%" className="c0" role="progressbar" >