fix(ProgressBar): improve screen reader output (#11698)

* fix(ProgressBar): improve screen reader output * fix(Progressbar): update tests for new aria method
carbon-design-system · Jul 7, 2022 · de05518 · de05518
1 parent a0ece2d
commit de05518
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/packages/react/src/components/ProgressBar/ProgressBar-test.js b/packages/react/src/components/ProgressBar/ProgressBar-test.js
@@ -33,14 +33,12 @@ describe('ProgressBar', () => {
     it('renders helper text when passed', () => {
       const text = 'ProgressBar helper text';
       wrapper.rerender(<ProgressBar {...props} helperText={text} />);
-      const helperText = wrapper.container.querySelector(
+      const helperTextNode = wrapper.container.querySelector(
         `.${prefix}--progress-bar__helper-text`
       );
+      const helperText = helperTextNode.firstChild.textContent;
 
-      expect(helperText.textContent).toBe(text);
-      expect(
-        wrapper.getByRole('progressbar').getAttribute('aria-describedby')
-      ).toBe(helperText.id);
+      expect(helperText).toBe(text);
     });
 
     it('still renders accessible label when hideLabel is passed', () => {

diff --git a/packages/react/src/components/ProgressBar/ProgressBar.js b/packages/react/src/components/ProgressBar/ProgressBar.js
@@ -88,9 +88,9 @@ function ProgressBar({
       <div
         className={`${prefix}--progress-bar__track`}
         role="progressbar"
+        aria-busy={!isFinished}
         aria-invalid={isError}
         aria-labelledby={labelId}
-        aria-describedby={helperText ? helperId : null}
         aria-valuemin={!indeterminate ? 0 : null}
         aria-valuemax={!indeterminate ? max : null}
         aria-valuenow={!indeterminate ? cappedValue : null}>
@@ -104,8 +104,14 @@ function ProgressBar({
         />
       </div>
       {helperText && (
-        <div id={helperId} className={`${prefix}--progress-bar__helper-text`}>
+        <div className={`${prefix}--progress-bar__helper-text`}>
           {helperText}
+          <div
+            className={`${prefix}--visually-hidden`}
+            aria-live="polite"
+            id={helperId}>
+            {isFinished ? 'Done' : 'Loading'}
+          </div>
         </div>
       )}
     </div>