fix(ProgressBar): add aria-valuetext attribute (#5100)

* fix(ProgressBar): add aria-valuetext attribute * Create slimy-sloths-whisper.md * test(ProgressBar): update snapshot * Update changeset to minor
primer · Oct 16, 2024 · b0d858a · b0d858a
1 parent 6d5f56d
commit b0d858a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/.changeset/slimy-sloths-whisper.md 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
@@ -85,6 +85,7 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
       '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
@@ -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"
 >