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

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;
       }

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;
+      }
     }
   }
 

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;

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;