fix(progress-bar): fix label accessibility violation
MODIFY
packages/react/src/components/ProgressBar/ProgressBar-test.js
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);

MODIFY
packages/react/src/components/ProgressBar/ProgressBar.js
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})` }}

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

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>