[Bug]: Upgrading to Tabster v4 makes v8 Dialog trap focus break when mixed with v9 Dialogs

[micahgodbolt]

Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

None

Reproduction

Open sandbox Note that input/button focus zone works as expected, and that v9 works as expected. Open v8 and note that focus does not stay inside the dialog when tabbing forward (it does going backwards).

Remove the v9 control from the page, and the v8 dialog works again.

https://codesandbox.io/s/v8-modals-rendered-with-v9-tabster-4-based-controls-ly6sj9

Bug Description

Before upgrading to Tabster 4, focus would stay trapped in v8 Dialogs

After upgrading to Tabster 4, focus escapes v8 Dialogs and moves to browser chrome, even though v8 dialogs don't use Tabster. This does not appear to affect regular FocusTrapZones (as demo'ed in sandbox)

Logs

No response

Requested priority

Blocking

Products/sites affected

loop

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[spmonahan]

The partner that reported this issue is unblocked so I've put this as "medium" priority. Other partners have faced similar issues when migrating to v9 as they will have controls like Panel that use FocusTrapZone and v9 controls like Dialog that use Tabster and the interactions between the two can sometimes lead to "fights" over focus control. Since incremental adoption is a recommended approach to moving from v8 to v9 we should make an effort to ensure the two remain compatible.

[SavannahBourgeois]

We are seeing something similar in Office. Is there an update on this issue?

[niandnad]

We're observing similar issues in Viva, affecting Modal and Dropdown menus. This is affecting the accessibility of our app and we would really appreciate it if this can be addressed sooner.

Below's some relevant information for the context.

• Our app has a mix of v8 and v9 components. We're on @fluentui/react@8.112.2 and @fluentui/react-components@9.34.2

• Several places in our app use v8 Modal and v8 Dropdown menus.

• In the v8 Modal experience,

  • keyboard focus shifts to the body when Modal is interacted with keyboard and the only way user can restore focus is by Shift-TABs.
  • Unlike TAB, Shift-TABing inside the Modal always keeps the focus in it.
  • This has been identified as a severe accessibility issue.

• In the v8 Dropdown menus,

  • Navigating through the menu options works as expected with Up/Down arrow keys.
  • While the dropdown is open and keyboard TABed, not only closes the dropdown, focus ends up moving to the last interactive element on the page.
  • This has been identified as a severe accessibility issue.

Please note that these issues are reproduced in Teams Personal App. The same code also serves our site directly accessed via a URL and it doesn't seem to be impacted.

[spmonahan]

@mshoho , any thoughts on what might be causing this issue?

[mshoho]

I believe this should be fixed with https://github.com/microsoft/fluentui/pull/30369

[bsunderhus]

Can you confirm this @micahgodbolt?!

[NotWoods]

I tested in Microsoft Loop and confirmed that Fluent V8 dialogs work properly now.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".