From 7d4b53bc2f561409b38ecabcbc6d2678a5ce119c Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Mon, 26 Oct 2020 12:14:16 -0500
Subject: Update button focus state for small screen

The focus state uses the box-shadow and two inset values. The first
should match the background of the button or link container. The
second is the actual color of the outline focus state. On smaller
viewports, the menu stacks and is a different color.

- Add mixin with optional color param for setting the color of the
inset  box-shadow that matches the container's background color
- Add a focus state for the helper-menu at the smaller breakpoint
- Remove the multiple :focus pseudo-selector declarations that
remove the outline and set it when we set the initial focus state

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I8eb046f892b395baba41dd62460d2a771bd1f92a
---
 src/components/AppHeader/AppHeader.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

(limited to 'src/components/AppHeader')

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 {
-- 
cgit v1.2.3