Fixing keyboard navigation inside modals

reactjs/react-modal#782 (comment)
4lejandrito · Nov 8, 2022 · 200181d · 200181d
1 parent 923b918
commit 200181d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git a/packages/creepyface-site/src/components/Modal.tsx b/packages/creepyface-site/src/components/Modal.tsx
@@ -46,10 +46,12 @@ export default function Modal({
         </div>
       )}
     >
-      <Button className="cancel" onClick={onClose}>
-        <Icon name="times" />
-      </Button>
       <main id={id}>{children}</main>
+      {!barebones && (
+        <Button className="cancel" onClick={onClose}>
+          <Icon name="times" />
+        </Button>
+      )}
     </ReactModal>
   )
 }
diff --git a/packages/creepyface-site/src/components/Video.tsx b/packages/creepyface-site/src/components/Video.tsx
@@ -67,6 +67,7 @@ export default function Video(props: {
   return (
     <div className="creepy video">
       <video
+        tabIndex={-1}
         playsInline
         ref={videoRef}
         autoPlay={true}

diff --git a/packages/creepyface-site/src/scss/_button.scss b/packages/creepyface-site/src/scss/_button.scss
@@ -3,6 +3,9 @@
   &:not(.link):not(.creepy) {
     &:not(.custom) {
       border-color: $color;
+      .light & {
+        border-color: currentColor;
+      }
     }
     &:disabled {
       opacity: 0.5;
@@ -16,6 +19,11 @@
       background: $color;
       color: $background;
       text-decoration: none;
+      .light & {
+        background: $color-text;
+        color: $color;
+        border-color: $color-text;
+      }
     }
   }
 }
@@ -77,12 +85,3 @@ button,
     right: -$spacing / 2;
   }
 }
-
-.light button,
-.light .button {
-  @include button($color-text, white);
-}
-
-.danger button {
-  @include button(white, $color-danger);
-}
diff --git a/packages/creepyface-site/src/scss/_mixins.scss b/packages/creepyface-site/src/scss/_mixins.scss
@@ -2,6 +2,7 @@ $spacing: 1rem;
 $color-main: #1abc9c;
 $color-danger: #dc3545;
 $color-text: var(--color-custom-primary, #{darken($color-main, 5%)});
+$color-shadow: var(--color-custom-primary, #{rgba($color-main, 0.5)});
 $color-background: var(--color-custom-secondary, #{darken($color-main, 8%)});
 $color-gradient: var(--color-custom-secondary, #{darken($color-main, 5%)});
 $main-creepyface-width: 8.5em;
@@ -54,6 +55,9 @@ $main-creepyface-height: math.div($main-creepyface-width * 45, 35);
 
 @mixin link($color: white) {
   color: $color;
+  .light & {
+    color: currentColor;
+  }
   font-weight: bold;
   display: inline-block;
   outline: 0 !important;
@@ -64,17 +68,19 @@ $main-creepyface-height: math.div($main-creepyface-width * 45, 35);
   }
   &:focus-visible {
     box-shadow: 0 0 0 0.2rem rgba($color, 0.5);
+    .light & {
+      box-shadow: 0 0 0 0.2rem $color-shadow;
+    }
+    .danger & {
+      box-shadow: 0 0 0 0.2rem rgba(white, 0.5) !important;
+    }
   }
   &:not(:disabled):hover {
     text-decoration-line: underline;
-    color: $color;
+    color: inherit;
   }
 }
 
-.danger a {
-  @include link(white);
-}
-
 %shadow {
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.31);
 }

diff --git a/packages/creepyface-site/src/scss/_modal.scss b/packages/creepyface-site/src/scss/_modal.scss
@@ -1,5 +1,8 @@
 .ReactModalPortal {
   z-index: 1;
+  position: absolute;
+  height: 1px;
+  width: 1px;
   .ReactModal__Overlay {
     background-color: transparent !important;
     display: flex;

diff --git a/packages/creepyface-site/src/scss/_page.scss b/packages/creepyface-site/src/scss/_page.scss
@@ -59,10 +59,4 @@ kbd {
 
 a {
   @include link;
-  .light & {
-    @include link($color-text);
-  }
-  .danger & {
-    @include link(white);
-  }
 }