RNW Accessibility: Flyout Automatically Reads All Elements on Open

[sgmuiruri]

When the Flyout menu is opened in screen reader mode (e.g., Windows Narrator), the screen reader automatically reads out all accessible elements within the Flyout without waiting for user interaction. This behavior can overwhelm users and prevent them from navigating through the menu items at their own pace.

Steps to Reproduce:

• Enable a screen reader, such as Windows Narrator.
• Open the Flyout menu.
• Observe that the screen reader automatically starts reading all accessible elements in the Flyout sequentially.
• Note that users cannot interrupt the reading to focus on a specific item or interact with the menu at their own pace.

Expected Behavior:

• The screen reader should announce the Flyout as a modal dialog or menu when it opens.
• Only the first actionable element (e.g., the first menu item or header) should be read out automatically.
• Users should have control over the navigation and reading of other elements using keyboard or screen reader gestures.

[jonthysell]

@chiaramooney can you get clarity on what the expectation is here? Should fly-outs read-out in Narrator? Do they in Xaml?

[Yajur-Grover]

I have connected with @sgmuiruri on this issue - it is a follow up to the following: microsoft/react-native-windows#14194. I tested this with WinUI 3 Gallery, and the behaviour exhibited on the Flyout component there is the same as what we are seeing on our Flyout component - so it looks like this is a platform limitation?

[Jamison-Jia]

Same issue i am facing even i have set IsHitTestVisible="False" or AutomationProperties.LiveSetting="Off" for the root element of the flyout.

[jonthysell]

This bug has been filed internally on the WinUI repo, @Yajur-Grover can you file this on the WinUI repo so we can link to it here?

[Yajur-Grover]

This issue is being tracked by the WinUI team. The OSS issue is here: microsoft/microsoft-ui-xaml#10303. Closing issue here.