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(); - 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 (
- +
+ aria-valuenow={!indeterminate ? cappedValue : null}>