bug: ensure Announce components work without pre-existing text node

[khiga8]

Remaining TODOs:

• add test coverage. is jest sufficient, or do we want storybook interactions? is there a way to thoroughly test live regions aside from seeing if element got populated? update: jest sufficient.
• there's no guidance/docs page for this component. do we want one? (can follow-up separately)
• add before/after videos with screen reader

relates to: #5566, https://github.com/github/accessibility-audits/issues/10031, https://github.com/github/accessibility-audits/issues/10017

Right now, announcements are not being triggered when the announce components (Announcement, AriaStatus, AriaAlert) go from being empty, to having text. See linked issue for broken examples.

The announcements do work in instances where these components have pre-existing text that gets updated.

Upon placing a debugger, I noticed we're not hitting the MutationObserver's callback in the failing scenario (where we go from empty to no text). This is because we need to set childList: true to detect when text nodes are added/removed. The current config, subtree: true and characterData: true, will only detect when existing text nodes are updated.

• MDN #childList:

Set to true to monitor the target node (and, if subtree is true, its descendants) for the addition of new child nodes or removal of existing child nodes. The default value is false.

Changelog

Changed

• Ensures that announcement are triggered when content is added to Announce, AriaAlert, AriaStatus without pre-existing text.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 83be114

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.47 KB (-0.05% 🔽)
packages/react/dist/browser.umd.js	104.76 KB (-0.1% 🔽)

[Pjrich1313]

Rerun debug run none

[francinelucca]

✨