search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.58k stars 1.09k forks source link

RAC `Slider` causes "No label associated with a form field" issue #6702

Closed imericxu closed 1 month ago

imericxu commented 2 months ago

Provide a general summary of the issue here

If a <label> doesn't wrap an <input>, it must contain a for attribute equal to the id of the <input> it labels.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

🤔 Expected Behavior?

The <label> element should automatically be populated with a for with the value matching the <input> id contained in <SliderThumb>.

😯 Current Behavior

The <input> in <SliderThumb> is populated with a labelledby, but the for attribute doesn't appear in the generated <label>.

💁 Possible Solution

Populate the for attribute similar to the other input components.

🔦 Context

No response

🖥️ Steps to Reproduce

This occurs or RAC's own website: https://react-spectrum.adobe.com/react-aria/Slider.html

To check, open up the console and click on the issues.

Version

1.2.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 2 months ago

for isn't needed if aria-labelledby is used

https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html

On user agents that support ARIA, the for/id association is ignored and the label for the input is provided only by aria-labelledby, per the accessible name and description calculation in the HTML to Platform Accessibility APIs Implementation Guide.

In addition, if you press the label, we handle setting focus on the appropriate thumb, especially in multi-thumb scenarios.

I would say this is working as expected. Are you running into an issue where it's not announcing or moving focus?

imericxu commented 2 months ago

It seems to be working fine, I just thought I should bring it up since Chrome dev tools says it's an issue.

snowystinger commented 1 month ago

Ah, I see the error. Looks like it's specific to sliders specifically using aria-label only. The Label element ends up empty and the element with the aria label isn't referenced correctly.

We just need to make an update to our component in the example and it should work correctly.

https://github.com/adobe/react-spectrum/pull/6710

Thanks for raising the issue.