fix(react-popover): prevent incorrect non-modal screen reader announcement#36383
Open
PaulGMardling wants to merge 12 commits into
Open
fix(react-popover): prevent incorrect non-modal screen reader announcement#36383PaulGMardling wants to merge 12 commits into
PaulGMardling wants to merge 12 commits into
Conversation
PaulGMardling
changed the title
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png | 404 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 510 | Changed |
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 618 | Changed |
vr-tests-react-components/ProgressBar converged 3 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png | 83 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png | 267 | Changed |
| vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png | 202 | Changed |
vr-tests-react-components/TagPicker 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png | 658 | Changed |
| vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png | 1319 | Changed |
There were 2 duplicate changes discarded. Check the build logs for more information.
…to fix Narrator style group announcement
PaulGMardling
force-pushed
the
fix/a11y-popover-default
branch
from
eaac4f0 to
ad5e853
Compare
…o focusable content + test coverage
PaulGMardling
changed the title
PaulGMardling
force-pushed
the
fix/a11y-popover-default
branch
from
1a1be75 to
ed33516
Compare
Hotell
reviewed
Jul 14, 2026
…faceAriaAttributes - Remove isolated unit tests for getPopoverSurfaceAriaAttributes function - Keep component-level integration tests that verify aria attributes through rendered component - Update function comment to remove mention of isolated testing - Component logic is now tested as a whole rather than in isolation
PaulGMardling
force-pushed
the
fix/a11y-popover-default
branch
from
ed33516 to
a2e2d0e
Compare
…shaking - Change condition from 'process.env.NODE_ENV === production' to '!== production' - Move development-only warning logic inside the production check - Ensures entire dev warning useEffect is dropped in production builds - Follows Fluent UI pattern for dev-only code with guaranteed tree-shaking
- Replace double negation operator (!!) with explicit Boolean() call - Improves code readability and follows codebase conventions - No functional change, same type coercion behavior
- Remove nonInteractiveContentWarning constant from public API (constants.ts) - Inline warning message directly in console.warn() call in usePopover.ts - Removes logging noise from public API exports - Update tests to use inlined warning message instead of constant reference
PaulGMardling
commented
Jul 14, 2026
| return; | ||
| } | ||
|
|
||
| // eslint-disable-next-line no-console |
Author
There was a problem hiding this comment.
Should we create a dev only es lint rule, or move this functionality to a separate dev-only utility?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes the incorrect Narrator announcement for non-modal Popover when content is non-interactive.
Previously, activating this scenario could produce:
contains style group
What Changed
PopoverSurface no longer applies role="group" unconditionally when trapFocus is false.
role="group" is now applied only when an accessible name is provided via aria-label or aria-labelledby, aligning with WAI-ARIA 1.2 requirements.
If no accessible name is provided, the surface renders as a plain div, so Narrator no longer announces contains style group.
Aria attribute logic was extracted into a pure function named getPopoverSurfaceAriaAttributes for isolated unit testing.
The default Popover story was updated to include aria-label as the recommended usage pattern.
Added a dev-only warning for non-modal popovers that open with non-interactive, non-focusable content to guide consumers toward accessible patterns.
Previous Behavior
On activating a popover with no interactive elements, Narrator announced:
contains style group
New Behavior
Narrator no longer announces contains style group for a non-modal popover surface without an accessible name.
Notes
This change resolves the incorrect announcement and adds consumer guidance for the non-interactive-content edge case.
Work Item
Fixes:
https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/18661