1 files changed, 10 insertions, 8 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 6a3989d5..b1554121 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -202,6 +202,9 @@ export default {
 </script>
 
 <style lang="scss">
+@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
+  box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
+}
 .app-header {
   .link-skip-nav {
     position: absolute;
@@ -228,7 +231,8 @@ export default {
       background-color: theme-color-level(light, 9);
     }
     &:focus {
-      box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
+      @include focus-box-shadow;
+      outline: 0;
     }
   }
 
@@ -243,10 +247,6 @@ export default {
       height: $header-height;
     }
 
-    &:focus {
-      outline: 0;
-    }
-
     .helper-menu {
       @include media-breakpoint-down(sm) {
         background-color: gray('800');
@@ -257,6 +257,11 @@ export default {
         .btn {
           padding: $spacer / 1.125 $spacer / 2;
         }
+
+        .nav-link:focus,
+        .btn:focus {
+          @include focus-box-shadow($gray-800);
+        }
       }
 
       .responsive-text {
@@ -275,9 +280,6 @@ export default {
     .nav-link {
       transition: $focus-transition;
     }
-    &:focus {
-      outline: 0;
-    }
   }
 
   .nav-trigger {