fix(a11y): leverage native :focus-visible in CSS

demo/src/sass/components/buttons.scss

@@ -44,8 +44,8 @@
     outline: 0;
   }
 
-  &.tab-focus {
-    @include tab-focus;
+  &:focus-visible {
+    @include focus-visible($color-button-background);
   }
 
   &:active {

demo/src/sass/components/links.scss

@@ -38,8 +38,8 @@ a {
     }
   }
 
-  &.tab-focus {
-    @include tab-focus;
+  &:focus-visible {
+    @include focus-visible($color-link);
   }
 
   &.no-border::after {

demo/src/sass/layout/core.scss

@@ -58,8 +58,8 @@ aside {
   a {
     color: $color-twitter;
 
-    &.tab-focus {
-      @include tab-focus($color-twitter);
+    &:focus-visible {
+      @include focus-visible($color-twitter);
     }
   }
 }

demo/src/sass/lib/mixins.scss

@@ -25,9 +25,9 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin tab-focus($color: $tab-focus-default-color) {
-  box-shadow: 0 0 0 3px rgba($color, 0.35);
-  outline: 0;
+@mixin focus-visible($color: $focus-default-color) {
+  outline: 2px dashed $color;
+  outline-offset: 2px;
 }
 
 // Use rems for font sizing

demo/src/sass/settings/colors.scss

@@ -39,4 +39,4 @@ $color-button-count-background: #fff;
 $color-button-count-text: $color-gray-600;
 
 // Focus
-$tab-focus-default-color: #fff;
+$focus-default-color: $color-brand-primary;

demo/src/sass/utilities/focus.scss

@@ -0,0 +1,4 @@
+*:focus-visible {
+  outline: 2px dotted $color-brand-primary;
+  outline-offset: 2px;
+}