Bug: AriaAlert does not announce RelativeTime content.

[khiga8]

Description

AriaAlert fails to announce RelativeTime content.

Related: https://github.com/github/accessibility-audits/issues/10539

Questions:

• Should AriaAlert be able to wrap and announce any content? Or should this only be used to wrap simple text content?
  • It may add a lot of complexity to try to get AriaAlert to handle custom elements like relative-time, or handle ARIA semantics correctly.
  • For example, if AriaAlert wraps content containing <p aria-hidden="true">Don't announce this</p>, should this aria-hidden content be announced?
  • I think whichever we land on is fine, as long as we document limitations/expectations!

Steps to reproduce

1. Checkout my branch.
2. Start up storybook.
3. Go to the AriaAlert relative time storybook example.
4. Navigate example with screen reader (e.g. VoiceOver, NVDA) and observe that relative time content is skipped in the screen reader announcement.

Version

v.35.2.0

Browser

No response

[joshblack]

Great point @khiga8, I guess with elements that have a Shadow DOM the utility we're using won't pull out their text content 🤔

I feel like we could go down the route of trying to add accessible name computation to the utility and make it more robust (I'm assuming that would mean these steps? https://www.w3.org/TR/accname-1.2/#computation-steps). We could also offer up a "lightweight" version of this that works in most situations (but not all)

I opened up a PR at: https://github.com/primer/react/pull/5724 to explore this, would love to hear your thoughts!

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.