Fix useTagGroup set aria-live to 'polite' for better screen reader support

[ryo-manba]

The current useTagGroup implementation has aria-live set to off, which means updates aren't announced when an input element is outside the grid, as seen in the APG example.

According to the specification, even if aria-live is set to 'off', screen readers will read the updates if the region is focused.

Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region.

Therefore, setting aria-live: 'polite' only when focused seems unnecessary.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[snowystinger]

I'm not sure I understand the comparison between the APG example and our implementation. The aria-live region in the APG example is for the "last change to tags" hidden region, whereas ours is the tag group itself. So I think they are a little different.

I think what you're suggesting is that aria-live could be left as off because it'll announce when it has focus anyways. If we set it to be polite always, then it will always announce, regardless of if focus is in the group or not.

Apologies if I've misunderstood.

[ryo-manba]

@snowystinger
Thank you for your comment! It seems there might be a misunderstanding so, let me clarify the situation.

The APG example does use a visually-hidden span with aria-live="polite", aria-relevant="text" to announce changes, which is different from our implementation. When a tag is added, the span's text updates, e.g., "{tagName} added. {totalNumber} recipients total," and due to aria-relevant="text" the last added element is announced.

In our current React Aria tagGroup, aria-live='polite' is only set when the grid is focused, which may not be effective. To ensure announcements occur like in the APG example triggered by external actions such as clicking the add button, regardless of focus aria-live='polite' should always be applied, not just when focused.

[snowystinger]

Thanks, I did some digging, and this particular line of code is 6+ years old. I'll see if anyone can remember why we have it.

[ryo-manba]

It looks like these commits might be related.

• Commit in react-spectrum
• Commit in coral-spectrum

[majornista]

I tend to be careful with leaving static aria-live="polite" attributes on things. In this case, if the user isn’t actively interacting with the TagList, I think we want to avoid out-of-band live region announcement of new Tags. This sort of logic was added to preemptively avoid the sort of out of band announcement of content marked with aria-live="polite" that would overflow the VoiceOver buffer and interfere with a user's ability to read content in other tabs when a W3C spec was open in a Chrome browser tab:

• Code samples should not be set to aria-live="polite" after core/highlight executes w3c/respec#1456
• Code examples with aria-live are doing weird things to VoiceOver w3c/aria-practices#715

[snowystinger]

Thanks @majornista for your expertise.

So in summary, theoretically setting it to 'off' would be the way to go, and then we don't need to check if focus is within. I don't know how good the support is for that, however, @ryo-manba we can test it if you'd like to make the change.

For components which are composite with a TagGroup in them, such as the APG example, users can follow the example as a blueprint. Our TagGroup's announcements won't happen while focus is in a textfield, so adding a live region which behaves how the APG example does would not conflict.

[ryo-manba]

Thank you, @majornista for highlighting the caution needed with static aria-live="polite".
As @snowystinger mentioned, following the APG example might be a viable approach. If we opt for aria-live="off", then settings like aria-atomic and aria-relevant would become unnecessary.

However, the TagGroup documentation notes:

Accessible – Follows the ARIA grid pattern, with additional selection announcements via an ARIA live region.

So, if we're considering adapting the announcement behavior, I believe we should test the approach I suggested.