Bug 1548917 - [Accessibility] Focus state refinements (#5020)

4 files changed, 36 insertions, 31 deletions

diff --git a/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss b/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
index afc9c492..1b9d3972 100644
--- a/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
+++ b/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
@@ -28,16 +28,6 @@ $col4-header-font-size: 14;
 
       box-shadow: 0 1px 4px 0 $grey-90-10;
 
-      &:hover {
-        @include dark-theme-only {
-          box-shadow: 0 0 0 5px $grey-60;
-        }
-
-        box-shadow: 0 0 0 5px $grey-30;
-        transition: box-shadow 150ms;
-        outline: none;
-      }
-
       .img-wrapper .img img {
         border-radius: 4px 4px 0 0;
       }
diff --git a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
index bb2879a5..edb7a2d4 100644
--- a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -23,25 +23,6 @@ $excerpt-line-height: 20;
     }
   }
 
-  &:hover {
-    header {
-      @include dark-theme-only {
-        color: $blue-40;
-      }
-
-      color: $blue-60;
-    }
-  }
-
-  &:active {
-    header {
-      @include dark-theme-only {
-        color: $blue-50;
-      }
-
-      color: $blue-70;
-    }
-  }
 
   .img-wrapper {
     width: 100%;
@@ -65,6 +46,39 @@ $excerpt-line-height: 20;
 
     &:focus {
       @include ds-fade-in;
+
+      @include dark-theme-only {
+        @include ds-fade-in($blue-40-40);
+      }
+    }
+
+    &:hover {
+      @include ds-fade-in($grey-30);
+
+      @include dark-theme-only {
+        @include ds-fade-in($grey-60);
+      }
+    }
+
+    &:focus,
+    &:hover {
+      header {
+        @include dark-theme-only {
+          color: $blue-40;
+        }
+
+        color: $blue-60;
+      }
+    }
+
+    &:active {
+      header {
+        @include dark-theme-only {
+          color: $blue-50;
+        }
+
+        color: $blue-70;
+      }
     }
   }
 
diff --git a/content-src/styles/_mixins.scss b/content-src/styles/_mixins.scss
index a0b10185..32198779 100644
--- a/content-src/styles/_mixins.scss
+++ b/content-src/styles/_mixins.scss
@@ -41,8 +41,8 @@
   border-bottom: 1px solid $grey-30;
 }
 
-@mixin ds-fade-in {
-  box-shadow: 0 0 0 1px $blue-50 inset, 0 0 0 1px $blue-50, 0 0 0 5px $blue-50-30;
+@mixin ds-fade-in($halo-color: $blue-50-30) {
+  box-shadow: 0 0 0 5px $halo-color;
   transition: box-shadow 150ms;
   border-radius: 4px;
   outline: none;
diff --git a/content-src/styles/_variables.scss b/content-src/styles/_variables.scss
index c0849098..8e678a5e 100644
--- a/content-src/styles/_variables.scss
+++ b/content-src/styles/_variables.scss
@@ -46,6 +46,7 @@ $grey-90-70: rgba($grey-90, 0.7);
 $grey-90-80: rgba($grey-90, 0.8);
 $grey-90-90: rgba($grey-90, 0.9);
 
+$blue-40-40: rgba($blue-40, 0.4);
 $blue-50-30: rgba($blue-50, 0.3);
 
 $black: #000;