fix: review compliance, move captureModalFocusContext into utils file.

Author: zskhan

src/script/components/Modals/PrimaryModal/PrimaryModal.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {FC, FormEvent, MouseEvent, useState, useRef, ChangeEvent, useEffect, useMemo} from 'react';
+import {FC, FormEvent, MouseEvent, useState, useRef, ChangeEvent, useEffect, useMemo, useCallback} from 'react';
 
 import {ValidationUtil} from '@wireapp/commons';
 import {ErrorMessage} from '@wireapp/react-ui-kit';
@@ -209,6 +209,13 @@ export const PrimaryModalComponent: FC = () => {
 
   const secondaryActions = Array.isArray(secondaryAction) ? secondaryAction : [secondaryAction];
 
+  const closeAction = useCallback(() => {
+    if (hasPasswordWithRules) {
+      const [closeActionItem] = secondaryActions;
+      closeActionItem?.action?.();
+    }
+  }, [hasPasswordWithRules, secondaryActions]);
+
   // Auto-focus close button when modal opens
   useEffect(() => {
     if (!isModalVisible) {
@@ -217,17 +224,23 @@ export const PrimaryModalComponent: FC = () => {
 
     // Use setTimeout to ensure the modal is fully rendered before focusing
     const timeoutId = setTimeout(() => {
-      if (closeButtonRef.current) {
-        closeButtonRef.current.focus();
+      // Focus primary button if it should come first, otherwise focus close button
+      const targetElement = primaryBtnFirst ? primaryActionButtonRef.current : closeButtonRef.current;
+      const fallbackElement = primaryBtnFirst ? closeButtonRef.current : primaryActionButtonRef.current;
+
+      if (targetElement) {
+        targetElement.focus();
+      } else if (fallbackElement) {
+        fallbackElement.focus();
       }
     }, 0);
 
     return () => clearTimeout(timeoutId);
-  }, [isModalVisible]);
+  }, [isModalVisible, primaryBtnFirst]);
 
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (isEscapeKey(event) && isModalVisible) {
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (isEscapeKey(event)) {
         removeCurrentModal();
         closeAction();
       }
@@ -237,18 +250,18 @@ export const PrimaryModalComponent: FC = () => {
         primaryAction?.action?.();
         removeCurrentModal();
       }
-    };
+    },
+    [closeAction, primaryAction],
+  );
+
+  useEffect(() => {
+    if (!isModalVisible) {
+      return undefined;
+    }
 
     document.addEventListener('keydown', onKeyDown);
     return () => document.removeEventListener('keydown', onKeyDown);
-  }, [primaryAction, isModalVisible]);
-
-  const closeAction = () => {
-    if (hasPasswordWithRules) {
-      const [closeAction] = secondaryActions;
-      closeAction?.action?.();
-    }
-  };
+  }, [isModalVisible, primaryAction, closeAction, onKeyDown]);
 
   const secondaryButtons = secondaryActions
     .filter((action): action is ButtonAction => action !== null && !!action.text)

src/script/repositories/calling/CallingRepository.ts

@@ -84,6 +84,7 @@ import {calculateChildWindowPosition} from 'Util/DOM/caculateChildWindowPosition
 import {isDetachedCallingFeatureEnabled} from 'Util/isDetachedCallingFeatureEnabled';
 import {t} from 'Util/LocalizerUtil';
 import {getLogger, Logger} from 'Util/Logger';
+import {captureModalFocusContext} from 'Util/ModalFocusUtil';
 import {roundLogarithmic} from 'Util/NumberUtil';
 import {matchQualifiedIds} from 'Util/QualifiedId';
 import {copyStyles} from 'Util/renderElement';
@@ -2782,31 +2783,21 @@ export class CallingRepository {
 
   /**
    * Helper method to get modal container and restore focus callback
-   * @returns Object containing container, targetDocument, and a focus restoration callback
+   * Call this method immediately before showing a modal to ensure the correct active element is captured.
+   * @returns Object containing container and focus restoration callback
    */
-  private getModalContainerAndRestoreFocusCallback(): {
-    container?: HTMLElement;
-    targetDocument: Document;
-    restoreFocusCallback: (additionalCallback?: () => void) => () => void;
-  } {
+  private getModalContainerAndRestoreFocusCallback() {
     const detachedWindow = this.callState.detachedWindow();
     const isDetachedWindow = this.callState.viewMode() === CallingViewMode.DETACHED_WINDOW;
-    const targetDocument = isDetachedWindow && detachedWindow ? detachedWindow.document : document;
-    const previouslyFocusedElement = targetDocument.activeElement as HTMLElement;
 
-    return {
+    const context = captureModalFocusContext({
+      targetDocument: isDetachedWindow && detachedWindow ? detachedWindow.document : undefined,
       container: isDetachedWindow && detachedWindow ? detachedWindow.document.body : undefined,
-      targetDocument,
-      restoreFocusCallback: (additionalCallback?: () => void) => () => {
-        // Execute additional callback if provided
-        if (additionalCallback) {
-          additionalCallback();
-        }
-        // Restore focus to the button that triggered the modal
-        if (previouslyFocusedElement && typeof previouslyFocusedElement.focus === 'function') {
-          previouslyFocusedElement.focus();
-        }
-      },
+    });
+
+    return {
+      container: context.container,
+      restoreFocusCallback: context.createFocusRestorationCallback,
     };
   }
 

src/script/util/ModalFocusUtil.ts

@@ -0,0 +1,94 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+interface ModalFocusContext {
+  /**
+   * The document to use for capturing the active element (defaults to global document)
+   */
+  targetDocument?: Document;
+
+  /**
+   * The container element where the modal will be rendered (e.g., for detached windows)
+   */
+  container?: HTMLElement;
+}
+
+interface ModalFocusResult {
+  /**
+   * The target document to use for modal operations
+   */
+  targetDocument: Document;
+
+  /**
+   * The container element where the modal will be rendered (undefined for main window)
+   */
+  container?: HTMLElement;
+
+  /**
+   * Creates a focus restoration callback that should be called when the modal closes
+   *
+   * @param additionalCallback - Optional callback to execute before restoring focus
+   * @returns Callback function to restore focus to the previously focused element
+   */
+  createFocusRestorationCallback: (additionalCallback?: () => void) => () => void;
+}
+
+/**
+ * Captures the current focus context for a modal before it's shown.
+ *
+ * @param context - Optional context to specify target document or container
+ * @returns Object containing document, container, and focus restoration callback creator
+ */
+export function captureModalFocusContext(context: ModalFocusContext = {}): ModalFocusResult {
+  const targetDocument = context.targetDocument || document;
+
+  // Capture the currently focused element at the time this function is called
+  const previouslyFocusedElement = targetDocument.activeElement as HTMLElement | null;
+
+  return {
+    targetDocument,
+    container: context.container,
+    createFocusRestorationCallback: (additionalCallback?: () => void) => () => {
+      // Execute additional callback if provided
+      if (additionalCallback) {
+        try {
+          additionalCallback();
+        } catch (error) {
+          console.error('Error in modal close callback:', error);
+        }
+      }
+
+      // Restore focus to the previously focused element
+      if (previouslyFocusedElement && typeof previouslyFocusedElement.focus === 'function') {
+        try {
+          // Check if the element is still in the document before focusing
+          if (
+            document.contains(previouslyFocusedElement) ||
+            (context.targetDocument && context.targetDocument.contains(previouslyFocusedElement))
+          ) {
+            previouslyFocusedElement.focus();
+          }
+        } catch (error) {
+          // Silently handle focus errors (e.g., element no longer in DOM)
+          console.error('Failed to restore focus to element:', error);
+        }
+      }
+    },
+  };
+}