fix: add focus trap to the selectionoverlay too

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 ? (

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,8 +75,11 @@ export const SelectionOverlay = () => {
 
   const isOnlyServerDeletable = isPublic;
 
+  const classNameAndId = 'message-selection-overlay';
+
   return (
-    <div className="message-selection-overlay">
+    <FocusTrap focusTrapOptions={{ fallbackFocus: `#${classNameAndId}`, allowOutsideClick: true }}>
+      <div className={classNameAndId} id={classNameAndId}>
         <div className="close-button">
           <SessionIconButton iconType="exit" iconSize="medium" onClick={onCloseOverlay} />
         </div>
@@ -100,5 +105,6 @@ export const SelectionOverlay = () => {
           />
         </div>
       </div>
+    </FocusTrap>
   );
 };