[Bug]: Accessibility for Toast doesn't work properly when used in a Dialog component

[DanieleDiLucido]

Component

Toast

Package version

9.55.0

React version

18.2.0

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 25.99 GB / 62.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  npmPackages:
    @fluentui/keyboard-keys: ^9.0.7 => 9.0.8 
    @fluentui/react-components: ^9.55.0 => 9.55.0 
    @fluentui/react-icons: ^2.0.175 => 2.0.263 
    @types/react: ^18.2.0 => 18.3.3 
    @types/react-dom: ^18.2.0 => 18.3.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1

Current Behavior

While using a Toast inside a Dialog the Screen Reader will not announce the Toast if the Toaster is outside the Dialog

Expected Behavior

The Toast should be announced regardless of the Toaster’s location.
If it’s necessary for the Toaster to be within the Dialog, it would be beneficial to include guidelines in the documentation.

Reproduction

https://stackblitz.com/edit/wtnsdo-sxbknx

Steps to reproduce

1. Open stackblitz
2. Enable Screen Reader
3. Click on the "Make toast"

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[spmonahan]

Reproed on Windows 11, Edge 131.0.2903.63, with Narrator.

My suspicion is the problem is related to both the Dialog and the Toast being in separate Portals.