feat: default support for :focus-visible #74

AlaskaAirlines · May 12, 2021 · 323dfa0 · 323dfa0
1 parent 3b63aa8
commit 323dfa0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -70,9 +70,19 @@
     }
   }
 
+  // if $focus-visible is true, override the default focus-visible outline
+  @if $focus-visible {
+    &amp;:focus-visible {
+      outline: 2px solid var(--auro-color-ui-default-on-light);
+    }
+  } @else {
+    &amp;:focus-visible {
+      outline: 0;
+    }
+  }
+
   // if $focus is true, override the default focus outline
   @if $focus {
-    &amp;:focus-visible,
     &amp;:focus {
       outline: 2px solid var(--auro-color-ui-default-on-light);
     }

diff --git a/src/_core.scss b/src/_core.scss
@@ -5,6 +5,7 @@
 @import 'libSupport/manageScope';
 
 $focus: null !default;
+$focus-visible: null !default;
 
 // sass-lint:disable no-important
 
@@ -39,9 +40,19 @@ $focus: null !default;
     }
   }
 
+  // if $focus-visible is true, override the default focus-visible outline
+  @if $focus-visible {
+    &:focus-visible {
+      outline: 2px solid var(--auro-color-ui-default-on-light);
+    }
+  } @else {
+    &:focus-visible {
+      outline: 0;
+    }
+  }
+
   // if $focus is true, override the default focus outline
   @if $focus {
-    &:focus-visible,
     &:focus {
       outline: 2px solid var(--auro-color-ui-default-on-light);
     }