fix(progress-bar): fix label accessibility violation (#9479)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 30, 2021 · 9723ed6 · 9723ed6
1 parent 3293dda
commit 9723ed6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/react/src/components/ProgressBar/ProgressBar-test.js b/packages/react/src/components/ProgressBar/ProgressBar-test.js
@@ -25,8 +25,8 @@ describe('ProgressBar', () => {
   describe('renders as expected', () => {
     it('progress bar and label ids match', () => {
       const bar = wrapper.getByRole('progressbar');
-      const label = wrapper.container.querySelector('label');
-      expect(bar.id).toBe(label.htmlFor);
+      const label = wrapper.container.querySelector('span');
+      expect(bar.getAttribute('aria-labelledby')).toBe(label.id);
     });
 
     it('renders helper text when passed', () => {
@@ -44,7 +44,7 @@ describe('ProgressBar', () => {
 
     it('still renders accessible when hideLabel is passed', () => {
       wrapper.rerender(<ProgressBar {...props} hideLabel />);
-      const label = wrapper.container.querySelector('label');
+      const label = wrapper.container.querySelector('span');
 
       expect(label.textContent).toBe(props.label);
       expect(label.classList.contains(`${prefix}--visually-hidden`)).toBe(true);

diff --git a/packages/react/src/components/ProgressBar/ProgressBar.js b/packages/react/src/components/ProgressBar/ProgressBar.js
@@ -21,7 +21,7 @@ function ProgressBar({
   value,
   helperText,
 }) {
-  const id = useId('progress-bar');
+  const labelId = useId('progress-bar');
   const helperId = useId('progress-bar-helper');
 
   const indeterminate = value === null || value === undefined;
@@ -50,17 +50,17 @@ function ProgressBar({
 
   return (
     <div className={wrapperClasses}>
-      <label className={labelClasses} htmlFor={id}>
+      <span className={labelClasses} id={labelId}>
         {label}
-      </label>
+      </span>
       <div
         className={`${prefix}--progress-bar__track`}
-        id={id}
         role="progressbar"
+        aria-labelledby={labelId}
+        aria-describedby={helperText ? helperId : null}
         aria-valuemin={!indeterminate ? 0 : null}
         aria-valuemax={!indeterminate ? max : null}
-        aria-valuenow={!indeterminate ? cappedValue : null}
-        aria-describedby={helperText ? helperId : null}>
+        aria-valuenow={!indeterminate ? cappedValue : null}>
         <div
           className={`${prefix}--progress-bar__bar`}
           style={{ transform: `scaleX(${percentage})` }}