feat: enhance accessibility in modal components on call view [WPB-21193]

src/script/components/Modals/ModalComponent/ModalComponent.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import React, {useEffect, useId, useRef, useState, useCallback, HTMLProps} from 'react';
+import React, {useEffect, useId, useRef, useState, HTMLProps} from 'react';
 
 import {CSSObject} from '@emotion/react';
 import {createPortal} from 'react-dom';
@@ -67,18 +67,21 @@ const ModalComponent = ({
   const isMounting = useRef<boolean>(true);
   const trapId = useId();
 
-  const trapFocus = useCallback((event: KeyboardEvent) => preventFocusOutside(event, trapId), [trapId]);
-
   useEffect(() => {
+    // Get the correct document based on the container
+    const targetDocument = container ? (container as HTMLElement).ownerDocument || document : document;
+
+    const trapFocus = (event: KeyboardEvent) => preventFocusOutside(event, trapId, targetDocument);
+
     if (isShown) {
-      document.addEventListener('keydown', trapFocus);
+      targetDocument.addEventListener('keydown', trapFocus);
     } else {
-      document.removeEventListener('keydown', trapFocus);
+      targetDocument.removeEventListener('keydown', trapFocus);
     }
     return () => {
-      document.removeEventListener('keydown', trapFocus);
+      targetDocument.removeEventListener('keydown', trapFocus);
     };
-  }, [isShown, onkeydown]);
+  }, [isShown, onkeydown, trapId, container]);
 
   useEffect(() => {
     let timeoutId = 0;

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

@@ -58,6 +58,7 @@ export const PrimaryModalComponent: FC = () => {
   const updateCurrentModalContent = usePrimaryModalState(state => state.updateCurrentModalContent);
   const currentId = usePrimaryModalState(state => state.currentModalId);
   const primaryActionButtonRef = useRef<HTMLButtonElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
   const isModalVisible = currentId !== null;
   const passwordValueRef = useRef<HTMLInputElement>(null);
   const [isFormSubmitted, setIsFormSubmitted] = useState(false);
@@ -83,6 +84,7 @@ export const PrimaryModalComponent: FC = () => {
     allButtonsFullWidth = false,
     primaryBtnFirst = false,
     size = 'small',
+    container,
   } = content;
 
   const isPassword = currentType === PrimaryModalType.PASSWORD;
@@ -207,21 +209,38 @@ export const PrimaryModalComponent: FC = () => {
 
   const secondaryActions = Array.isArray(secondaryAction) ? secondaryAction : [secondaryAction];
 
+  // Auto-focus close button when modal opens
   useEffect(() => {
-    const onKeyPress = (event: KeyboardEvent) => {
+    if (!isModalVisible) {
+      return undefined;
+    }
+
+    // Use setTimeout to ensure the modal is fully rendered before focusing
+    const timeoutId = setTimeout(() => {
+      if (closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      }
+    }, 0);
+
+    return () => clearTimeout(timeoutId);
+  }, [isModalVisible]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
       if (isEscapeKey(event) && isModalVisible) {
         removeCurrentModal();
         closeAction();
       }
 
       if (isEnterKey(event) && primaryAction?.runActionOnEnterClick) {
+        event.preventDefault();
         primaryAction?.action?.();
         removeCurrentModal();
       }
     };
 
-    document.addEventListener('keypress', onKeyPress);
-    return () => document.removeEventListener('keypress', onKeyPress);
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
   }, [primaryAction, isModalVisible]);
 
   const closeAction = () => {
@@ -272,8 +291,10 @@ export const PrimaryModalComponent: FC = () => {
       onBgClick={onBgClick}
       dataUieName={modalUie}
       size={size}
+      container={container}
     >
       <PrimaryModalHeader
+        ref={closeButtonRef}
         titleText={titleText}
         closeBtnTitle={closeBtnTitle}
         hideCloseBtn={hideCloseBtn}

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

@@ -17,6 +17,8 @@
  *
  */
 
+import {forwardRef} from 'react';
+
 import * as Icon from 'Components/Icon';
 
 import {removeCurrentModal} from '../PrimaryModalState';
@@ -28,26 +30,31 @@ interface ModalHeaderProps {
   closeAction: () => void;
 }
 
-export const PrimaryModalHeader = ({titleText, closeAction, closeBtnTitle, hideCloseBtn}: ModalHeaderProps) => {
-  return (
-    <div className="modal__header" data-uie-name="status-modal-title">
-      <h2 className="modal__header__title" id="modal-title">
-        {titleText}
-      </h2>
-      {!hideCloseBtn && (
-        <button
-          type="button"
-          className="modal__header__button"
-          onClick={() => {
-            removeCurrentModal();
-            closeAction();
-          }}
-          aria-label={closeBtnTitle}
-          data-uie-name="do-close"
-        >
-          <Icon.CloseIcon className="modal__header__icon" aria-hidden="true" />
-        </button>
-      )}
-    </div>
-  );
-};
+export const PrimaryModalHeader = forwardRef<HTMLButtonElement, ModalHeaderProps>(
+  ({titleText, closeAction, closeBtnTitle, hideCloseBtn}, ref) => {
+    return (
+      <div className="modal__header" data-uie-name="status-modal-title">
+        <h2 className="modal__header__title" id="modal-title">
+          {titleText}
+        </h2>
+        {!hideCloseBtn && (
+          <button
+            ref={ref}
+            type="button"
+            className="modal__header__button"
+            onClick={() => {
+              removeCurrentModal();
+              closeAction();
+            }}
+            aria-label={closeBtnTitle}
+            data-uie-name="do-close"
+          >
+            <Icon.CloseIcon className="modal__header__icon" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+PrimaryModalHeader.displayName = 'PrimaryModalHeader';

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

@@ -19,6 +19,8 @@
 
 import {ReactNode, useEffect, useRef} from 'react';
 
+import {Runtime} from '@wireapp/commons';
+
 import {ModalComponent} from 'Components/Modals/ModalComponent';
 
 import {largeModalStyles} from './PrimaryModalShell.styles';
@@ -33,6 +35,7 @@ interface PrimaryModalShellProps {
   onClose: () => void;
   onBgClick: () => void;
   size?: ModalSize;
+  container?: Element | DocumentFragment;
 }
 
 export const PrimaryModalShell = ({
@@ -43,14 +46,48 @@ export const PrimaryModalShell = ({
   onClose,
   onBgClick,
   size,
+  container,
 }: PrimaryModalShellProps) => {
   const modalsRef = useRef<HTMLDivElement | null>(null);
 
+  // Make detached window background inert when modal is shown
   useEffect(() => {
+    if (!container) {
+      return undefined;
+    }
+
+    const detachedWindowRoot = (container as HTMLElement).querySelector?.('#detached-window') as HTMLElement;
+
+    if (!detachedWindowRoot) {
+      return undefined;
+    }
+
+    const applyInertAttributes = (element: HTMLElement) => {
+      element.setAttribute('aria-hidden', 'true');
+      (element as any).inert = '';
+      if (Runtime.isDesktopApp()) {
+        element.setAttribute('tabIndex', '-1');
+        element.style.pointerEvents = 'none';
+      }
+    };
+
+    const removeInertAttributes = (element: HTMLElement) => {
+      element.removeAttribute('aria-hidden');
+      delete (element as any).inert;
+      if (Runtime.isDesktopApp()) {
+        element.removeAttribute('tabIndex');
+        element.style.pointerEvents = '';
+      }
+    };
+
     if (isShown) {
-      modalsRef.current?.focus();
+      applyInertAttributes(detachedWindowRoot);
     }
-  }, [isShown]);
+
+    return () => {
+      removeInertAttributes(detachedWindowRoot);
+    };
+  }, [isShown, container]);
 
   return (
     <div
@@ -68,6 +105,7 @@ export const PrimaryModalShell = ({
         onBgClick={onBgClick}
         data-uie-name={dataUieName}
         wrapperCSS={size === 'large' ? largeModalStyles : undefined}
+        container={container}
       >
         {isShown && children}
       </ModalComponent>

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

@@ -147,6 +147,7 @@ const updateCurrentModalContent = (type: PrimaryModalType, options: ModalOptions
     primaryBtnFirst = false,
     closeOnSecondaryAction = true,
     size = 'small',
+    container,
   } = options;
 
   const content = {
@@ -171,6 +172,7 @@ const updateCurrentModalContent = (type: PrimaryModalType, options: ModalOptions
     primaryBtnFirst,
     closeOnSecondaryAction,
     size,
+    container,
   };
 
   switch (type) {

src/script/components/Modals/PrimaryModal/PrimaryModalTypes.ts

@@ -62,6 +62,8 @@ export interface ModalOptions {
   allButtonsFullWidth?: boolean;
   primaryBtnFirst?: boolean;
   size?: ModalSize;
+  /** DOM element where modal should be rendered for detached windows */
+  container?: Element | DocumentFragment;
 }
 
 export enum PrimaryModalType {
@@ -103,6 +105,7 @@ export interface ModalContent {
   allButtonsFullWidth?: boolean;
   primaryBtnFirst?: boolean;
   size?: ModalSize;
+  container?: Element | DocumentFragment;
 }
 
 export type ModalItem = {id: string; options: ModalOptions; type: PrimaryModalType};

src/script/components/calling/FullscreenVideoCall.tsx

@@ -222,28 +222,35 @@ const FullscreenVideoCall = ({
   }
 
   useEffect(() => {
+    const isFullScreen = viewMode === CallingViewMode.FULL_SCREEN || viewMode === CallingViewMode.DETACHED_WINDOW;
+
+    if (!isFullScreen) {
+      return undefined;
+    }
+
+    const targetDocument =
+      viewMode === CallingViewMode.DETACHED_WINDOW && detachedWindow ? detachedWindow.document : document;
+
     const onKeyDown = (event: KeyboardEvent): void => {
       const target = event.target as HTMLElement;
 
-      if (
-        viewMode !== CallingViewMode.FULL_SCREEN ||
-        target?.getAttribute('aria-controls') === 'epr-search-id' // Exclude emoji search input
-      ) {
+      if (target?.getAttribute('aria-controls') === 'epr-search-id') {
+        // Exclude emoji search input
         return;
       }
 
       event.preventDefault();
       event.stopPropagation();
 
-      preventFocusOutside(event, 'video-calling');
+      preventFocusOutside(event, 'video-calling', targetDocument);
     };
 
-    document.addEventListener('keydown', onKeyDown);
+    targetDocument.addEventListener('keydown', onKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', onKeyDown);
+      targetDocument.removeEventListener('keydown', onKeyDown);
     };
-  }, [viewMode]);
+  }, [viewMode, detachedWindow]);
 
   const {showAlert, isGroupCall, clearShowAlert} = useCallAlertState();