MATRIX-9057 Focus trap for connect modal

lib/index.js

@@ -7,6 +7,123 @@ const INTEGRATION_V2 = "V2";
 const eventListeners = {};
 let focusTrap = null;
 
+/**
+ * Initialize focus trap styles
+ */
+function initializeFocusTrapStyles() {
+    if (document.getElementById("focus-trap-styles")) {
+        return; // Styles already injected
+    }
+
+    const styleSheet = document.createElement("style");
+    styleSheet.id = "focus-trap-styles";
+    styleSheet.textContent = `
+        [data-focus-sentinel] {
+            position: absolute;
+            opacity: 0;
+            pointer-events: none;
+            width: 0;
+            height: 0;
+            padding: 0;
+            margin: 0;
+            border: none;
+        }
+    `;
+    document.head.appendChild(styleSheet);
+}
+
+
+/**
+ * FocusTrap - Manages focus trapping for modal dialogs with iframes
+ * Creates invisible sentinel buttons before and after iframe content
+ * to prevent focus from escaping the modal
+ */
+class FocusTrap {
+
+    constructor(modalElement) {
+        this.modalElement = modalElement;
+        this.sentinels = [];
+        this.trapInstance = null;
+        this.handleFocus = this.handleFocus.bind(this);
+    }
+
+    /**
+     * Creates an invisible sentinel button with standard styles
+     * @param {string} position - "start" or "end"
+     * @returns {HTMLButtonElement} Configured sentinel button
+     */
+    createSentinel(position) {
+        const button = document.createElement("button");
+        button.setAttribute("data-focus-sentinel", position);
+        button.setAttribute("aria-hidden", "true");
+        button.setAttribute("tabindex", "0");
+        button.addEventListener("focus", this.handleFocus);
+        return button;
+    }
+
+    /**
+     * Handles focus when user tabs through sentinel boundaries
+     */
+    handleFocus() {
+        const iframe = this.modalElement.querySelector("#human-api");
+        if (iframe) {
+            iframe.focus();
+        }
+    }
+
+    /**
+     * Sets up the focus trap with both sentinels and focus-trap library
+     */
+    setup() {
+        initializeFocusTrapStyles();
+
+        // Create and insert sentinel buttons
+        const sentinelStart = this.createSentinel("start");
+        const sentinelEnd = this.createSentinel("end");
+
+        this.modalElement.insertBefore(sentinelStart, this.modalElement.firstChild);
+        this.modalElement.appendChild(sentinelEnd);
+
+        this.sentinels.push(sentinelStart, sentinelEnd);
+
+        // Setup focus trap
+        const iframe = this.modalElement.querySelector("#human-api");
+        this.trapInstance = createFocusTrap(this.modalElement, {
+            escapeDeactivates: false,
+            fallbackFocus: this.modalElement,
+            initialFocus: this.modalElement,
+            onActivate: () => {
+                setTimeout(() => {
+                    if (iframe?.contentWindow) {
+                        iframe.contentWindow.focus();
+                    }
+                }, 200);
+            }
+        });
+    }
+
+    /**
+     * Activates the focus trap
+     */
+    activate() {
+        this.trapInstance?.activate();
+    }
+
+    /**
+     * Deactivates and cleans up the focus trap
+     */
+    deactivate() {
+        this.trapInstance?.deactivate();
+
+        // Remove all sentinels
+        this.sentinels.forEach(sentinel => {
+            sentinel.removeEventListener("focus", this.handleFocus);
+            sentinel.remove();
+        });
+        this.sentinels = [];
+    }
+}
+
 if (typeof window === "object") {
     window.addEventListener("load", mountOnClickListener);
 }
@@ -78,6 +195,7 @@ function setElementConfig(element) {
             hapiToken: token,
             hapiSegment: segment,
             hapiPinnedProviders: pinnedProviders,
+            hapiUseSentinelTrap = false
         } = this.dataset;
 
         open({
@@ -88,7 +206,8 @@ function setElementConfig(element) {
             token,
             version: INTEGRATION_V2,
             segment,
-            pinnedProviders
+            pinnedProviders,
+            useSentinelTrap: hapiUseSentinelTrap !== "false" && Boolean(hapiUseSentinelTrap)
         });
     });
 }
@@ -293,16 +412,25 @@ function load(options = {}) {
             mountListeners();
 
             if (enableFocusTrap) {
-                focusTrap = createFocusTrap(iframeContainerDiv, {
-                    escapeDeactivates: false,
-                    fallbackFocus: iframeContainerDiv,
-                    initialFocus: iframeContainerDiv,
-                    onActivate() {
-                        setTimeout(() => {
-                            iframeContainerDiv.contentWindow.focus();
-                        }, 200);
-                    }
-                });
+                // Check if we should use the enhanced FocusTrap with sentinels
+                // or fall back to the original createFocusTrap
+                if (options.useSentinelTrap) {
+                    focusTrap = new FocusTrap(iframeContainerDiv);
+                    focusTrap.setup();
+                    focusTrap.activate();
+                } else {
+                    // Original createFocusTrap for backward compatibility
+                    focusTrap = createFocusTrap(iframeContainerDiv, {
+                        escapeDeactivates: false,
+                        fallbackFocus: iframeContainerDiv,
+                        initialFocus: iframeContainerDiv,
+                        onActivate() {
+                            setTimeout(() => {
+                                iframeContainerDiv.contentWindow.focus();
+                            }, 200);
+                        }
+                    });
+                }
             }
 
             return {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "humanapi-connect-client",
-    "version": "2.4.4",
+    "version": "2.4.5-beta.4",
     "devDependencies": {
         "@babel/cli": "^7.8.4",
         "@babel/core": "^7.9.6",