From dca7469974558941cb5f8c8b7767e609cc6f98e8 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 27 Mar 2024 17:16:38 +1100
Subject: [PATCH] fix: add focus trap to the selectionoverlay too

---
 ts/components/SessionWrapperModal.tsx         | 11 ++--
 .../ConversationHeaderSelectionOverlay.tsx    | 52 +++++++++++--------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/ts/components/SessionWrapperModal.tsx b/ts/components/SessionWrapperModal.tsx
index 48e53219c..f69d66c4d 100644
--- a/ts/components/SessionWrapperModal.tsx
+++ b/ts/components/SessionWrapperModal.tsx
@@ -63,19 +63,16 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     }
   };
 
+  const fallbackFocusId = 'session-wrapper-modal';
+
   return (
-    <FocusTrap focusTrapOptions={{ initialFocus: '#focus-trap-start-wrapper' }}>
+    <FocusTrap focusTrapOptions={{ fallbackFocus: `#${fallbackFocusId}`, allowOutsideClick: true }}>
       <div
         className={classNames('loki-dialog modal', additionalClassName || null)}
         onClick={handleClick}
         role="dialog"
+        id={fallbackFocusId}
       >
-        {/* FocusTrap needs a button always mounted as a start, which is apparently not our case */}
-        <div
-          role="button"
-          id="focus-trap-start-wrapper"
-          style={{ opacity: 0, width: 0, height: 0 }}
-        />
         <div className="session-confirm-wrapper">
           <div ref={modalRef} className="session-modal">
             {showHeader ? (
diff --git a/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx b/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx
index fb3c6e70f..deb3fcf9d 100644
--- a/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx
+++ b/ts/components/conversation/header/ConversationHeaderSelectionOverlay.tsx
@@ -1,6 +1,8 @@
+import FocusTrap from 'focus-trap-react';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import useKey from 'react-use/lib/useKey';
+
 import {
   deleteMessagesById,
   deleteMessagesByIdForEveryone,
@@ -73,32 +75,36 @@ export const SelectionOverlay = () => {
 
   const isOnlyServerDeletable = isPublic;
 
+  const classNameAndId = 'message-selection-overlay';
+
   return (
-    <div className="message-selection-overlay">
-      <div className="close-button">
-        <SessionIconButton iconType="exit" iconSize="medium" onClick={onCloseOverlay} />
-      </div>
+    <FocusTrap focusTrapOptions={{ fallbackFocus: `#${classNameAndId}`, allowOutsideClick: true }}>
+      <div className={classNameAndId} id={classNameAndId}>
+        <div className="close-button">
+          <SessionIconButton iconType="exit" iconSize="medium" onClick={onCloseOverlay} />
+        </div>
 
-      <div className="button-group">
-        <SessionButton
-          buttonColor={SessionButtonColor.Danger}
-          buttonShape={SessionButtonShape.Square}
-          buttonType={SessionButtonType.Solid}
-          text={window.i18n('delete')}
-          onClick={() => {
-            if (selectedConversationKey) {
-              if (isOnlyServerDeletable) {
-                void onDeleteSelectedMessagesForEveryone(
-                  selectedConversationKey,
-                  selectedMessageIds
-                );
-              } else {
-                void deleteMessagesById(selectedMessageIds, selectedConversationKey);
+        <div className="button-group">
+          <SessionButton
+            buttonColor={SessionButtonColor.Danger}
+            buttonShape={SessionButtonShape.Square}
+            buttonType={SessionButtonType.Solid}
+            text={window.i18n('delete')}
+            onClick={() => {
+              if (selectedConversationKey) {
+                if (isOnlyServerDeletable) {
+                  void onDeleteSelectedMessagesForEveryone(
+                    selectedConversationKey,
+                    selectedMessageIds
+                  );
+                } else {
+                  void deleteMessagesById(selectedMessageIds, selectedConversationKey);
+                }
               }
-            }
-          }}
-        />
+            }}
+          />
+        </div>
       </div>
-    </div>
+    </FocusTrap>
   );
 };