selected focus states

Author: langermank

src/base/base.scss

@@ -119,14 +119,10 @@ input[type='radio'],
 input[type='checkbox'] {
   &:focus,
   &:focus-visible {
-    outline-offset: 2px;
+    outline-offset: 0;
   }
 }
 
-.faketarget {
-  @include focusBoxShadowInset;
-}
-
 // for handling focus conditionally
 .focus {
   @include focusBoxShadowInset;

src/buttons/button.scss

@@ -210,6 +210,22 @@ a.btn-primary {
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
     box-shadow: var(--color-btn-outline-selected-shadow);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:disabled,

src/buttons/misc.scss

@@ -29,7 +29,7 @@
     }
   }
 
-  &:not(.dropdown-item, .social-reaction-summary-item) {
+  &:not(.dropdown-item) {
     &:focus,
     &:focus-visible {
       border-radius: $border-radius;

src/links/link.scss

@@ -7,6 +7,11 @@
     text-decoration: underline;
     cursor: pointer;
   }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
 }
 
 .Link--primary {

src/navigation/filter-list.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Filters list
 //
 // A vertical list of filters.
@@ -45,6 +47,22 @@
   &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   .count {

src/navigation/subnav.scss

@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Needs refactoring
 // Sub nav
 .subnav {
@@ -46,6 +48,22 @@
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:first-child {