feat(react-headless-components): use AriaLiveAnnouncer for Toast component and update tests

[dmytrokirpa]

Previous Behavior

Follow up for the Headless Toast component - there was a custom/copy-pasted version of the AriaLive component and was mentioned during the PR review #36059 (comment)

New Behavior

• Add export for AriaLive component types/hooks/renderFn in react-toast
• switch headless Toast component to use the exported types/hooks/renderFn from react-toast

Related Issue(s)

• Fixes #

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-headless-components-preview react-headless-components-preview: entire library	198.139 kB 56.549 kB	199.491 kB 57.024 kB	1.352 kB 475 B

_{🤖 This report was generated against 35720ad3c847dcf7877dfaab72ad295b76c47a08}

[github-actions]

Pull request demo site: URL

[layershifter]

Why not use https://storybooks.fluentui.dev/react/?path=/docs/utilities-aria-live-useannounce--docs?

[dmytrokirpa]

Why not use https://storybooks.fluentui.dev/react/?path=/docs/utilities-aria-live-useannounce--docs?

That's a good question, didn't know it exists and seeing it for the first time 😄. @layershifter Do you happen to know why it's not used in the react-toast implementation? Probably the component was created earlier than the hook/util.

But I'll switch to it, thanks!

[layershifter]

Do you happen to know why it's not used in the react-toast implementation? Probably the component was created earlier than the hook/util.

Yeah, the reason is correct. Toast was done before. Removing/changing it in Toast would be a breaking change, but you don't have this problem with headless.

[Copilot]

Pull request overview

Updates the headless Toast/Toaster implementation in @fluentui/react-headless-components-preview to rely on @fluentui/react-aria’s AriaLiveAnnouncer for screen-reader announcements, and adjusts/adds unit tests to reflect the new live-region behavior (mounted on document.body).

Changes:

• Wrap the headless Toaster’s AriaLive wiring with AriaLiveAnnouncer so announcements use the shared announcer/live-region mechanism.
• Replace the custom DOM-rendered aria-live regions in headless AriaLive with an adapter to AnnounceContext (useAnnounce() + announceRef binding).
• Update/add tests to validate body-mounted live region behavior and adapter behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/Toaster.test.tsx	Updates expectations to assert the live region is mounted on document.body and not created when a custom announce prop is provided.
packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/renderToaster.tsx	Wraps AriaLive with AriaLiveAnnouncer when renderAriaLive is enabled.
packages/react-components/react-headless-components-preview/library/src/components/Toast/AriaLive/AriaLive.tsx	Replaces inline live-region rendering/queueing with an AnnounceContext adapter that populates announceRef.
packages/react-components/react-headless-components-preview/library/src/components/Toast/AriaLive/AriaLive.test.tsx	Adds unit and end-to-end tests for the adapter behavior and AriaLiveAnnouncer body-mounted live region integration.
change/@fluentui-react-headless-components-preview-0c06bf3c-fc53-48f0-8c19-5d507ad82db8.json	Adds a patch change file describing the update.

Comments suppressed due to low confidence (1)

packages/react-components/react-headless-components-preview/library/src/components/Toast/Toaster/renderToaster.tsx:8

• The PR description mentions adding exports/types/hooks/render functions in react-toast, but this PR only changes the headless preview implementation/tests. Please update the PR description to match the actual change set, or include the missing react-toast export updates if they were intended.

import { AriaLiveAnnouncer } from '@fluentui/react-aria';
import { assertSlots } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { ToasterSlotsInternal, ToasterState } from './Toaster.types';
import { AriaLive } from '../AriaLive';