[Bug]: Screen reader is reading content outside of the dialog after first load

[MirandaGe]

Component

Dialog

Package version

9.56.3

React version

17.0.1

Environment

Edge chromium latest version
Narrator latest version

Current Behavior

After open a dialog, screen reader will read out content behind the dialog. See video (issue start after 20s)

Expected Behavior

Content outside Dialog should not be read out.

Reproduction

https://react.fluentui.dev/?path=/docs/components-dialog--docs

Steps to reproduce

1. Open Narrator
2. Navigate to the demo page: https://react.fluentui.dev/?path=/docs/components-dialog--docs, open a dialog, wait for screen reader to finish reading.

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No 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.

[smhigley]

Hi @MirandaGe, thanks for testing accessibility! Our docs site renders the examples in an iframe, with the Storybook navigation existing outside of it (that left pane that Narrator navigated to after the dialog in your video). Examples in the content section of the page cannot affect UI outside of it. I believe this is the default behavior of Storybook (the framework we use for our docs site), and since these are sandboxed examples, I don't think there's much of a need to change that behavior.

Just by the nature of iframes, script within them cannot affect anything outside the iframe / cannot cross iframe boundaries. Our Dialog is correctly hiding all background content within its own page. If you have a Dialog or other modal in a web page with iframes and you want that modal to affect UI across iframes, you would need to add custom script.

Hope that helps!