diff --git a/src/core/client/ui/components/Modal/Modal.tsx b/src/core/client/ui/components/Modal/Modal.tsx
index ad7ed4165..ac201f23b 100644
--- a/src/core/client/ui/components/Modal/Modal.tsx
+++ b/src/core/client/ui/components/Modal/Modal.tsx
@@ -98,6 +98,9 @@ const Modal: FunctionComponent<Props> = ({
     },
     [onBackdropClick, onClose]
   );
+  const handleWrapperClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+  }, []);
 
   if (open && modalDOMNode) {
     return ReactDOM.createPortal(
@@ -115,7 +118,11 @@ const Modal: FunctionComponent<Props> = ({
           >
             <div className={styles.alignContainer1}>
               <div className={styles.alignContainer2}>
-                <div className={styles.wrapper}>
+                <div
+                  className={styles.wrapper}
+                  role="presentation"
+                  onClick={handleWrapperClick}
+                >
                   <TrapFocus>{children}</TrapFocus>
                 </div>
               </div>
diff --git a/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap b/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
index 6b1b4dad2..a8ac4e4be 100644
--- a/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
+++ b/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -23,6 +23,8 @@ exports[`renders correctly 1`] = `
         >
           <div
             className="Modal-wrapper"
+            onClick={[Function]}
+            role="presentation"
           >
             <div
               onFocus={[Function]}