diff --git a/web/media/media.css b/web/media/media.css
--- a/web/media/media.css
+++ b/web/media/media.css
@@ -103,6 +103,9 @@
   width: 100%;
   height: 100%;
 }
+div.multimediaModalOverlay > .mediaContainer:focus {
+  outline: none;
+}
 div.mediaContainer > img,
 div.mediaContainer > video {
   width: auto;
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -126,10 +126,13 @@
       <div
         className={css.multimediaModalOverlay}
         onClick={this.onBackgroundClick}
-        tabIndex={0}
-        onKeyDown={this.onKeyDown}
       >
-        <div ref={this.overlayRef} className={css.mediaContainer}>
+        <div
+          ref={this.overlayRef}
+          className={css.mediaContainer}
+          tabIndex={0}
+          onKeyDown={this.onKeyDown}
+        >
           {mediaModalItem}
         </div>
         <XCircleIcon