Guide Cue close button not auto-focused

mongodb · Sep 17, 2024 · 6ab4257 · 6ab4257
1 parent 3c54a59
commit 6ab4257
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/src/components/ActionBar/DarkModeGuideCue.js b/src/components/ActionBar/DarkModeGuideCue.js
@@ -41,6 +41,16 @@ const GuideCueHeader = styled.div`
   justify-content: center;
 `;
 
+const FocusTrapInvisibleButton = styled.button`
+  border: none;
+  outline: none;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+`;
+
 const VideoContainer = styled.div`
   width: 242px;
   overflow: hidden;
@@ -110,6 +120,8 @@ const DarkModeGuideCue = ({ guideCueRef }) => {
     >
       <GuideCueContent>
         <GuideCueHeader>
+          {/* Invisible button to trap focus. Ask from design to not have close button auto-focused */}
+          <FocusTrapInvisibleButton />
           <CloseButton
             onClick={onClose}
             className={cx(css`