fix(ui-progress): add aria-label to ProgressBar via the screenReaderLabel prop

INSTUI-4599

Author: ToMESSKa

packages/ui-progress/src/ProgressBar/__tests__/ProgressBar.test.tsx

@@ -55,6 +55,19 @@ describe('<ProgressBar />', () => {
     expect(progress).toHaveAttribute('value', '30')
   })
 
+  it('should render a progress element with an aria-label attribute', async () => {
+    const { container } = render(
+      <ProgressBar
+        screenReaderLabel="Chapters read"
+        valueMax={60}
+        valueNow={30}
+      />
+    )
+    const progress = container.querySelector('progress')
+
+    expect(progress).toHaveAttribute('aria-label', 'Chapters read')
+  })
+
   it('should format the displayed text', async () => {
     const current = 30
     const max = 60

packages/ui-progress/src/ProgressBar/index.tsx

@@ -103,10 +103,6 @@ class ProgressBar extends Component<ProgressBarProps> {
       typeof formatScreenReaderValue === 'function'
         ? formatScreenReaderValue({ valueNow: valueNow!, valueMax: valueMax! })
         : undefined
-    // consolidating the label and aria-valuetext to put in aria-label because
-    // NVDA does not read aria-valuetext: https://github.com/nvaccess/nvda/issues/913
-    // But leaving aria-valuetext because JAWS ignores aria-label
-    const labelAndValueText = `${screenReaderLabel} ${valueText}`
 
     const value = callRenderProp(renderValue, {
       valueNow: valueNow!,
@@ -126,7 +122,8 @@ class ProgressBar extends Component<ProgressBarProps> {
             css={styles?.htmlProgress}
             max={valueMax}
             value={valueNow}
-            aria-valuetext={labelAndValueText}
+            aria-valuetext={valueText}
+            aria-label={screenReaderLabel}
           />
 
           <span css={styles?.track} role="presentation" aria-hidden="true">