Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: AriaAlert does not announce RelativeTime content. #5723

Open
khiga8 opened this issue Feb 27, 2025 · 1 comment
Open

Bug: AriaAlert does not announce RelativeTime content. #5723

khiga8 opened this issue Feb 27, 2025 · 1 comment
Labels
bug Something isn't working react

Comments

@khiga8
Copy link
Contributor

khiga8 commented Feb 27, 2025

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
Copy link
Member

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: #5724 to explore this, would love to hear your thoughts!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working react
Projects
None yet
Development

No branches or pull requests

2 participants