Giters

microsoft / fluentui-react-native

A react-native component library that implements the Fluent Design System.

Home Page:https://developer.microsoft.com/fluentui

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FocusTrapZone in win32 tester app does not trap focus going forward

lawrencewin opened this issue · comments

commented

Willing to submit a PR to fix?

  • I am willing to submit a PR to fix

Requested priority

No response

Products/applications affected

No response

Package version(s)

npm: 8.0.0, yarn: 1.22.19, react-native-win32: 0.68.0

OS version(s)

Windows 11

Platform

  • iOS
  • macOS
  • win32
  • windows
  • android

Xcode version

No response

Please provide a reproduction of the bug

Not sure if this is an issue with the config of the FocusTrapZone on the tester page or a bug with the native module.

On the main branch as of this bug report:

  1. yarn + yarn build in the root directory.
  2. cd apps/win32 + yarn bundle to build the tester.
  3. yarn run-win32 to start the app.
  4. Navigate to the FocusTrapZone page of the app.
  5. Switch focus on the view that says "Press space to render or enter to trap, f to focus" and press Enter to go into the trapzone.
  6. Keep navigating forwards with the Down Arrow or Tab key. You should exit out of the trapzone without having to do much of anything. (Trying the same thing with Shift + Tab or Up Arrow will trap focus going backwards.

Actual behavior

The FocusTrapZone fails to trap user focus when moving forward with Down Arrow or Tab. The linked video will show this:

FluentUI.Tester.2022-11-09.15-23-56.mp4

Expected behavior

When looking at the equivalent web component, forwards and backwards focus movement using Tab / Shift + Tab is both trapped.

commented

@rurikoaraki have you encountered this? Is this a test page config issue or an issue with the module?

commented

@lawrencewin I think I did notice that one of the Focus Zone test pages wasn't working properly, I think it's been broken for a while. In terms of whether it's a test page issue of an issue with the component, I would see if the component works properly in a base case, and if not, debug to see what's going on. It's likely an issue with the component itself, test pages are usually pretty plain.