RNW Accessibility Issue: Flyout Focus Management Affecting Windows Narrator and Keyboard Navigation

[sgmuiruri]

Problem Description

flyout component fails to acheive focus when toggled unless clicked into. Adding focus refs for focus management and accessiblity props does not help resolve the issue either.

Steps To Reproduce

Issue can be easily reproduced by looking at the RN Gallery's flyout page.
launch windows narrator and then launhc the flyout and watch behavior.

Expected Results

Expect flyout to automatically fall into focus when launch or isopen, which would then allow keyboard focus and narrator focus to work.

CLI version

11.3.7

Environment

System:
  OS: Windows 11 10.0.26100
  CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
  Memory: 12.90 GB / 63.95 GB
Binaries:
  Node:
    version: 18.17.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\ProgramData\global-npm\yarn.CMD
  npm:
    version: 9.6.7
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.12.35506.116 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

No response

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[Yajur-Grover]

So I have tried repro'ing this issue, and I am hitting the same behavior when clicking on the Flyout with Narrator on - focus does not move to the flyout. However, when using keyboard input, the focus works by moving onto the flyout. Looking at the email thread for the same issue, looks like this is the same behavior you are experiencing? Do you have an example of the way you tried to use ref management to fix the issue?

[Yajur-Grover]

I faced a similar issue with Popup and used refs to allow focus to shift automatically using both keyboard and mouse input: microsoft/react-native-gallery#319. Can you try using refs like this to resolve the issue?

[sgmuiruri]

@Yajur-Grover, have you had success with that approach? I will take a deeper look to understand what the expectation is here.

[sgmuiruri]

@Yajur-Grover I have implemented something similar to this but the new issue now is that the focus is not navigatable in the popup. Let me exaplin further, once the popup i sopen, focus does transfer to the popup however, keyboard navigation inside the popup is non-functional, mouse navigation still works.

[Yajur-Grover]

@sgmuiruri can you give me a link to your code implementing this, as well as a video repro of the issue?

[sgmuiruri]

sending you a teams message

[sgmuiruri]

@Yajur-Grover and @jonthysell adding this issue here for tracking purposes since it ties into the focus issue on the flyout: microsoft/react-native-gallery#524