Meter component: issues identified by Axe DevTools

[j-lefloch]

Provide a general summary of the issue here

Due to feedback on the progressbar role (with both meter and progressbar present), Axe DevTools reports a critical issue: The ARIA attributes aria-valuenow="0", aria-valuemin="0", aria-valuemax="100", and aria-valuetext="0 %" are not allowed on this element.

🤔 Expected Behavior?

No issue reported

😯 Current Behavior

💁 Possible Solution

Maybe consider excluding the progressbar role from the feedback mechanism

🔦 Context

No response

🖥️ Steps to Reproduce

Visible on official website:
https://react-spectrum.adobe.com/react-aria/Meter.html

Version

last version

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS Sonoma 14.4.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Do you have a link to the axe rule that is failing? https://dequeuniversity.com/rules/axe/html/4.9

I'm curious if there is a real issue with assistive technology. If not, this may be a false positive.

[j-lefloch]

You might be correct regarding the false positive issue.
Axe DevTools did not flag any issues after I manually removed either the meter or progressbar roles (via devtools), leaving only one value.
The screen reader accurately announces it with the expected role.

However here is the link to the axe rule that is failing: https://dequeuniversity.com/rules/axe/4.9/aria-allowed-attr?application=AxeChrome

[snowystinger]

This is a false positive. See

react-spectrum/packages/@react-aria/meter/src/useMeter.ts

Line 34 in 6288d4a

// Use the meter role if available, but fall back to progressbar if not

It looks like the FF bug has been closed, but the Chrome one is still open. Hopefully we'll be able to remove the fallback some day