[Bug]: Keyborg malfunction inside microfrontends with no isolation

[mathis-m]

Component

Utilities

Package version

any

React version

any

Environment

-

Important

This issue affects D365 Model Driven Apps with PCFs deployed.

Real-world impact: This is a critical issue for Microsoft Dynamics 365, where PCFs (Power Apps Component Framework) come with FluentUI v9 bundled. For example, a standard PCF with FluentUI v9 Combobox component will not indicate keyboard navigation mode when users interact with the component using the keyboard, because the Keyborg instance created by the PCF is overridden by the one created by the out-of-the-box script.

Current Behavior

• Imagine two bundles containing the default example of Combobox
• Both bundles are loaded on the same page and each rendered
• Package A loads first and registers a keyborg instance "k1" on window.__keyborg.refs.k1
• This ref contains callbacks to manage the https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-aria/library/src/activedescendant/useActiveDescendant.ts state
• Package B loads second and registers a keyborg instance "k1" on window.__keyborg.refs.k1 effectivly overriding the Package A registration
• User interacts with Combobox A using keyboard => no outlines are shown as the state of the useActiveDescendant is not updated properly

Expected Behavior

keyborg instances are not overriding themself

Ref. Issue: microsoft/keyborg#99

Reproduction

https://stackblitz.com/edit/ht9elwz1

Steps to reproduce

1. See repro or comment

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

npm-patch (keyborg+2.6.0.patch)

diff --git a/node_modules/keyborg/dist/esm/index.js b/node_modules/keyborg/dist/esm/index.js
index 0b18026..2d18f5d 100644
--- a/node_modules/keyborg/dist/esm/index.js
+++ b/node_modules/keyborg/dist/esm/index.js
@@ -216,7 +216,6 @@ function getLastFocusedProgrammatically(win) {
 
 // src/Keyborg.ts
 var _dismissTimeout = 500;
-var _lastId = 0;
 var KeyborgCore = class {
   constructor(win, props) {
     this._isNavigatingWithKeyboard_DO_NOT_USE = false;
@@ -266,7 +265,13 @@ var KeyborgCore = class {
         }
       }
     };
-    this.id = "c" + ++_lastId;
+    if (win?.__keyborg?.lastId !== undefined) {
+      this.id = "c" + ++win.__keyborg.lastId;
+    } else {
+      win.__keyborg = win.__keyborg || {};
+      win.__keyborg.lastId = 10001;
+      this.id = "c10001";
+    }
     this._win = win;
     const doc = win.document;
     if (props) {
@@ -374,15 +379,19 @@ var KeyborgCore = class {
 var Keyborg = class _Keyborg {
   constructor(win, props) {
     this._cb = [];
-    this._id = "k" + ++_lastId;
     this._win = win;
     const current = win.__keyborg;
     if (current) {
+      current.lastId = current.lastId || 10000;
+      this._id = "k" + ++current.lastId;
       this._core = current.core;
       current.refs[this._id] = this;
     } else {
       this._core = new KeyborgCore(win, props);
+      let lastId = win.__keyborg?.lastId || 10000;
+      this._id = "k" + ++lastId;
       win.__keyborg = {
+        lastId: lastId,
         core: this._core,
         refs: { [this._id]: this }
       };
diff --git a/node_modules/keyborg/dist/index.js b/node_modules/keyborg/dist/index.js
index eb4bbe2..939a490 100644
--- a/node_modules/keyborg/dist/index.js
+++ b/node_modules/keyborg/dist/index.js
@@ -247,7 +247,6 @@ function getLastFocusedProgrammatically(win) {
 
 // src/Keyborg.ts
 var _dismissTimeout = 500;
-var _lastId = 0;
 var KeyborgCore = class {
   constructor(win, props) {
     this._isNavigatingWithKeyboard_DO_NOT_USE = false;
@@ -297,7 +296,13 @@ var KeyborgCore = class {
         }
       }
     };
-    this.id = "c" + ++_lastId;
+    if (win?.__keyborg?.lastId !== undefined) {
+      this.id = "c" + ++win.__keyborg.lastId;
+    } else {
+      win.__keyborg = win.__keyborg || {};
+      win.__keyborg.lastId = 10001;
+      this.id = "c10001";
+    }
     this._win = win;
     const doc = win.document;
     if (props) {
@@ -405,15 +410,19 @@ var KeyborgCore = class {
 var Keyborg = class _Keyborg {
   constructor(win, props) {
     this._cb = [];
-    this._id = "k" + ++_lastId;
     this._win = win;
     const current = win.__keyborg;
     if (current) {
+      current.lastId = current.lastId || 10000;
+      this._id = "k" + ++current.lastId;
       this._core = current.core;
       current.refs[this._id] = this;
     } else {
       this._core = new KeyborgCore(win, props);
+      let lastId = win.__keyborg?.lastId || 10000;
+      this._id = "k" + ++lastId;
       win.__keyborg = {
+        lastId: lastId,
         core: this._core,
         refs: { [this._id]: this }
       };

[ValentinaKozlova]

Hey @mathis-m,
Could you please provide links to "Steps to reproduce"? I'm out of context and it's not clear how to reproduce this thing.
Also, as I understood, this issue is in keyborg repo. Why is it in fluentui now? And is it possible to provide reproducible environment (e.g. stackblitz)?

[mathis-m]

Hey @mathis-m, Could you please provide links to "Steps to reproduce"? I'm out of context and it's not clear how to reproduce this thing. Also, as I understood, this issue is in keyborg repo. Why is it in fluentui now? And is it possible to provide reproducible environment (e.g. stackblitz)?

Repro: https://stackblitz.com/edit/ht9elwz1
Simple setup two bundles(react apps) are loaded on the same site.
Both using a fluent ui component that depends on keyborg.
As keyborg will have unintended side effects when multiple "module scopes" exist, the black box eg. in combox listbox are not shown when using e.g. arrow down key.

Technical details can be found in the keyborg issue.

Reason TLDR:

• Visibility
• Impact on MS Products if we follow the MS recommended approach
• Patched Version of keyborg needs to be used here for fluent ui after fix was done

Reason:
This is impacting MS Products in the D365 Universe. Not sure if it came up already interanly, but I have caught this on a trial instance of dynamics.

MS recommends using Fluent UI v9 components to integrate with the styling of dynamics, see https://learn.microsoft.com/en-us/power-apps/developer/component-framework/fluent-modern-theming#:~:text=Use%20modern%20theming%2C%20which%20is%20based%20on%20Fluent%20UI%20React%20v9%2C%20to%20style%20your%20component.%20This%20approach%20is%20recommended%20to%20get%20the%20best%20performance%20and%20theming%20experience%20for%20your%20component.

If we do this we run into issues that are caused by keyborg.

In addition, I have opened this issue here as fluent-ui will need to update the keyborg package dependency as soon as a fix was provided over there.

[miroslavstastny]

@mshoho - could you please check this one? What would you suggest?

[mathis-m]

@mshoho - could you please check this one? What would you suggest?

Raised PR microsoft/keyborg#104

[microsoft-github-policy-service]

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".

[microsoft-github-policy-service]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.