perf(Announce): skip getComputedStyle when there is no text content to announce

[hectahertz]

Closes #

Announce calls window.getComputedStyle(element) to check if the element is visible before announcing. This forces synchronous style recalculation for the entire DOM. When Announce renders with initially empty content (e.g. TreeView's AriaStatus live region, which starts with ariaLiveMessage = ''), this reflow is completely wasted.

The fix: check getTextContent(element) first. If empty, bail out before the expensive getComputedStyle call.

Benchmarks (TreeView StressTest, 1000 items, 14K DOM nodes)

Metric	Before	After
LCP	2,398ms	1,952ms
Render delay	2,225ms	1,806ms
Announce.tsx forced reflow	294ms	✨ 0ms ✨

Changelog

New

N/A

Changed

• Announce checks for empty text content before calling getComputedStyle, avoiding a forced synchronous style recalculation on mount when there's nothing to announce

Removed

N/A

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

• All 71 live-region and TreeView tests pass
• Updated one TreeView test that assumed live-region element would be created on initial empty-content mount. The element is now lazily created on the first real announcement instead.
• To verify: open the StressTest story, run a Performance trace with reload, confirm no Announce.tsx forced reflow appears.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: ac6635a

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-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Pull request overview

This PR optimizes the Announce component's performance by reordering logic to check for empty text content before calling getComputedStyle, avoiding expensive forced style recalculations when there's nothing to announce. This is particularly beneficial for components like TreeView that render with initially empty live region content.

Changes:

• Reordered announce logic to check text content before visibility styles, eliminating unnecessary getComputedStyle calls on empty content
• Updated TreeView test to get live region after first announcement instead of before, reflecting the lazy creation behavior

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/react/src/live-region/Announce.tsx	Reordered logic to check text content before getComputedStyle, avoiding forced reflows for empty announcements
packages/react/src/TreeView/TreeView.test.tsx	Updated test to get live region after first announcement, reflecting lazy element creation
.changeset/announce-skip-empty-reflow.md	Added changeset documenting the performance improvement

[siddharthkp]

Surprised this makes that much of a difference!

[hectahertz]

@siddharthkp I know, right?

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/13894

[primer-integration]

Integration test results from github/github-ui:

CI Passed
VRT Running
Projects Passed