fix(f6 navigation): work properly when multiple runtimes (#9810)

F6 navigation adds `keydown` handler to the body element that will move the focus to the previous / next group that has focusable element. If F6 navigation feature is enabled in multiple runtimes this handler will be attach multiple times.

With current change, we ensure that only one callback will be executed to move the focus to the correct element. This callback is coming from the latest registered runtime (newest version).

Fixes: #9795

packages/base/src/features/F6Navigation.ts

@@ -4,9 +4,23 @@ import { instanceOfUI5Element } from "../UI5Element.js";
 import { getFirstFocusableElement } from "../util/FocusableElements.js";
 import getFastNavigationGroups from "../util/getFastNavigationGroups.js";
 import isElementClickable from "../util/isElementClickable.js";
+import { getCurrentRuntimeIndex, compareRuntimes } from "../Runtimes.js";
+import getSharedResource from "../getSharedResource.js";
+
+type F6Registry = {
+	instance?: F6Navigation,
+}
+
+const currentRuntimeINdex = getCurrentRuntimeIndex();
+
+const shouldUpdate = (runtimeIndex: number | undefined) => {
+	if (runtimeIndex === undefined) {
+		return true;
+	}
+	return compareRuntimes(currentRuntimeINdex, runtimeIndex) === 1; // 1 means the current is newer, 0 means the same, -1 means the resource's runtime is newer
+};
 
 class F6Navigation {
-	static _instance: F6Navigation;
 	keydownHandler: (event: KeyboardEvent) => void;
 	selectedGroup: HTMLElement | null = null;
 	groups: Array<HTMLElement> = [];
@@ -20,6 +34,10 @@ class F6Navigation {
 		document.addEventListener("keydown", this.keydownHandler);
 	}
 
+	removeEventListeners() {
+		document.removeEventListener("keydown", this.keydownHandler);
+	}
+
 	async groupElementToFocus(nextElement: HTMLElement) {
 		const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
 
@@ -149,10 +167,6 @@ class F6Navigation {
 		elementToFocus?.focus();
 	}
 
-	removeEventListeners() {
-		document.removeEventListener("keydown", this.keydownHandler);
-	}
-
 	updateGroups() {
 		this.setSelectedGroup();
 		this.groups = getFastNavigationGroups(document.body);
@@ -181,12 +195,19 @@ class F6Navigation {
 		this.removeEventListeners();
 	}
 
+	get _ui5RuntimeIndex() {
+		return currentRuntimeINdex;
+	}
+
 	static init() {
-		if (!this._instance) {
-			this._instance = new F6Navigation();
-		}
+		const f6Registry = getSharedResource<F6Registry>("F6Registry", {});
 
-		return this._instance;
+		if (!f6Registry.instance) {
+			f6Registry.instance = new F6Navigation();
+		} else if (shouldUpdate(f6Registry.instance?._ui5RuntimeIndex)) {
+			f6Registry.instance?.destroy();
+			f6Registry.instance = new F6Navigation();
+		}
 	}
 }