AriaAlert and AriaStatus announcements are broken

[khiga8]

Description

This was surfaced via https://github.com/github/accessibility-audits/issues/10031 and https://github.com/github/accessibility-audits/issues/10017, but given this is not a button-specific issue and may impact any usage of AriaAlert/AriaStatus filing for visibility.

Announcements are broken in some examples despite usage of AriaAlert and AriaStatus, indicating there might be a bug.

Working examples:

• https://primer.style/react/storybook/?path=/story/experimental-components-banner-examples--with-dynamic-content

Broken examples:

• https://primer.style/react/storybook/?path=/story/components-button-examples--loading-status-announcement-successful

Steps to reproduce

Navigate above examples with VoiceOver and observe no announcement. (I don't have access to Windows VM at the moment, but will update when I do!)

Also inspect the DOM and notice the live region isn't present sometimes, OR doesn't get populated.

Version

latest

Browser

Chrome

[joshblack]

Thanks for opening this, @khiga8! Appreciate it a ton. Definitely very odd that it's just not being added for the button example, specifically the live-region is not being added to the DOM 🤔

Let me know if I can help out at all or if you would like to pair on this together!