Description
Provide a general summary of the issue here
When the TagGroup collection is empty, it still renders a <div>
element with ARIA-related attributes, but the role attribute is missing. This results in a DOM node with ARIA attributes applied to an element that lacks a valid role, which violates accessibility best practices as outlined in ARIA prohibited attributes.
The problematic logic appears to be in the useTagGroup hook:
https://github.com/adobe/react-spectrum/blob/4150364a2dfa249ca149723548c62e0d3325476f/packages/%40react-aria/tag/src/useTagGroup.ts#L108C19-L108C29
🤔 Expected Behavior?
If no role is added to tag group element div then don't add other aria attributes aswell or keep role attribute grid even when collection is empty.
😯 Current Behavior
When TagGroup collection is empty it creates div with all aria attributtes but role is absent.
💁 Possible Solution
- don't add other aria attributes when role is not set
or - keep role attribute grid even when collection is empty.
🔦 Context
We are checking our application using browserstack accesibility toolkit and it's giving us errors because of TagGroup role issue.
🖥️ Steps to Reproduce
- Create TagGroup with no Tags
- Observe generated dom element for TagGroup - missing role with there are not Tags
Version
react-aria: 3.40.0, react-aria-components: 1.9.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
Windows
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response