Apply button focus indicators only on keyboard focus (#360)

Author: thatbudakguy

sitemedia/semantic/src/site/elements/button.overrides

@@ -52,8 +52,7 @@
         border-color: @disabledTextColor;
     }
 
-    &.focus,
-    &:focus {
+    &:focus-visible {
         outline: @focusOutline;
     }
 }

srcmedia/scss/pages/_search.scss

@@ -150,6 +150,10 @@
             display: none;
         }
 
+        .button.focus {
+            outline: 2px dashed black;
+        }
+
         .button.active {
             order: 1;
             color: white;

srcmedia/scss/snippets/_nav.scss

@@ -216,16 +216,14 @@
     }
 
     // PPA logo/brand has smaller triangle shifted to the bottom; no hover
-    .brand .item:focus::before,
-    .brand .item.focus::before {
+    .brand .item:focus-visible::before {
         top: 54px;
         @include triangle-overlay($white, 42px);
         opacity: 1;
     }
 
     // remove default outline focus indicator
     a.item:focus,
-    a.item.focus,
     .item a:focus {
         outline: none;
     }