ProgressBar aria-label is still warned out even if we pass aria-hidden

[bertearazvan]

Provide a general summary of the issue here

ProgressBar emits a console warning requiring aria-label or aria-labelledby even when aria-hidden={true} is passed.

🤔 Expected Behavior?

When aria-hidden={true} is set, no accessibility label warning should be emitted. The element is excluded from the accessibility tree, so a label is neither required nor meaningful.

😯 Current Behavior

useLabel inside useProgressBar unconditionally checks for the presence of label, aria-label, or aria-labelledby and warns if none is found — regardless of whether aria-hidden={true} is also set.

If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility

💁 Possible Solution

In useLabel (or useProgressBar), skip the label warning when aria-hidden={true} is present on the element, since the ARIA spec states that aria-hidden removes the element and its entire subtree from the accessibility tree — making labelling requirements moot.

🔦 Context

In our use case we use it as a visual indication for a step into a stepper. The steps are predefined and the bar is set to some static visual sizes (0, 50%, 100%) for either not started, in progress or completed. In this case, accessiblity-wise it does not provide the value by itself, but rather the step it is part of is the one providing accessibility value. That being said, the bar does not have an accessible value and we pass aria-hidden to it. Given the warning is being returned, we have a workaround but it's not actually correct and it should now return a warning if aria-hidden is passed.

🖥️ Steps to Reproduce

1. Render <ProgressBar value={50} aria-hidden /> from react-aria-components.
2. Observe the console warning in development mode: "If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility"
3. Adding aria-label="" suppresses the warning but is semantically unnecessary since the element is hidden from assistive technology

Version

1.15.1

What browsers are you seeing the problem on?

Other

If other, please specify.

Not browser-specific. Reproducible in any environment where NODE_ENV !== 'production', including Jest/jsdom and all major browsers in development mode (Chrome, Firefox, Safari, Edge).

What operating system are you using?

Windows 11

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Can you say a little more about your use case? I'm not sure when a progress bar would be purely decorative?

[bertearazvan]

Yes! I've updated the description with a context for why it is purely decorative.

[devongovett]

Why use a progress bar at all if it's hidden? Just use a div.

[bertearazvan]

I get your point, from a practical standpoint it makes sense. On our end it's a design that was applied to that component, so it would be a bit redundant to create a duplicate design for "just" a div imo.

But is it correct that this use-case should not be handled? I assume, technically aria-hidden should hide the aria- related fields and not make them mandatory anymore. So then, it's a limitation atm in the library that could technically be solved.

[snowystinger]

Could you abstract away your styles for the div and share it between this decoration and your actual progress bars? I feel like design should be able to do something similar. It doesn't look like aria-hidden even gets applied to the dom, I don't see it in our API either, though I'm also not seeing an error when I apply it, so that's a little strange.

It also sounds like it could be constructed a different way, the circle + line is actually the progress bar, one aria-label on it, the rest is inside and decorative.

[equinusocio]

Can you say a little more about your use case? I'm not sure when a progress bar would be purely decorative?

We have similar issue. In our case progress bars are just decorative because a text value/max is always showed (and announced) beside it.

[snowystinger]

Couldn't you structure it as

<ProgressBar aria-label="Tasks complete 3 of 6">
  <div className="indicator" />
  <div aria-hidden>3/6</div>
</div>

Seems like you'd want to in order to make the 3/6 easier to understand by AT?