diff --git a/web/modals/modal-overlay.css b/web/modals/modal-overlay.css
--- a/web/modals/modal-overlay.css
+++ b/web/modals/modal-overlay.css
@@ -5,7 +5,7 @@
   height: 100%;
   z-index: 4;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: #000000e6;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/web/modals/modal-overlay.react.js b/web/modals/modal-overlay.react.js
--- a/web/modals/modal-overlay.react.js
+++ b/web/modals/modal-overlay.react.js
@@ -15,6 +15,12 @@
   const overlayRef = React.useRef();
   const firstClickRef = React.useRef(null);
 
+  React.useLayoutEffect(() => {
+    if (overlayRef.current) {
+      overlayRef.current.focus();
+    }
+  }, []);
+
   const onBackgroundMouseDown = React.useCallback(event => {
     firstClickRef.current = event.target;
   }, []);
@@ -40,12 +46,6 @@
     [onClose],
   );
 
-  React.useEffect(() => {
-    if (overlayRef.current) {
-      overlayRef.current.focus();
-    }
-  }, []);
-
   return (
     <div
       className={css.modalOverlay}