From 9723ed63aef46dc50ecd57a7b8b983b3d9a04c9d Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Mon, 30 Aug 2021 21:41:37 +0200
Subject: [PATCH] fix(progress-bar): fix label accessibility violation (#9479)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/ProgressBar/ProgressBar-test.js   |  6 +++---
 .../react/src/components/ProgressBar/ProgressBar.js  | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/ProgressBar/ProgressBar-test.js b/packages/react/src/components/ProgressBar/ProgressBar-test.js
index 8730fd36aa39..f0c39a947c6e 100644
--- 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
index f02a2b3a461f..bf2eb60d8eef 100644
--- 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})` }}