Update focus styles (#822)

* Add new gold color & use it in base focus-outline * Update mixin name * Remove apparently unused mixin * Update focus outline of .menu-item-container This doesn't seem like a class that's used anymore * Update outline focus color of "Skip to Content" Not sure if this is a change that we will keep * Switch to box-shadow approach * Remove offset argument * Bump major version * Tweak link focus styles We're sticking with the double box-shadow for links in the header & footer, but going with the outline approach for links in the main content area due to the possibility of wrapping
department-of-veterans-affairs · May 20, 2022 · 3a6a902 · 3a6a902
1 parent e3a3b02
commit 3a6a902
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 19 deletions.
diff --git a/packages/formation/package.json b/packages/formation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/formation",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "The VA design system",
   "keywords": [
     "va",

diff --git a/packages/formation/sass/base/_b-mixins.scss b/packages/formation/sass/base/_b-mixins.scss
@@ -87,19 +87,13 @@
   }
 }
 
-@mixin focus-gold-light-outline($offset: 2) {
-  outline: $focus-outline;
-  outline-offset: #{$offset}px;
-}
-
-@mixin focus-gold-lighter-highlight {
-  background: $color-gold-lighter;
-  outline: 2px solid $color-gold-lighter;
-  outline-offset: 0;
+@mixin focus-gold-vivid-outline {
+  box-shadow: 0 0 0 3px $color-white, 0 0 4px 6px $color-gold-50v;
+  outline: none;
 }
 
 @mixin focus {
-  @include focus-gold-light-outline;
+  @include focus-gold-vivid-outline;
 }
 
 @mixin color-transition {
@@ -153,8 +147,7 @@
     background: $color-link-default-hover;
   }
   &:focus {
-    @include focus-gold-light-outline;
-    outline-offset: 0;
+    @include focus-gold-vivid-outline;
   }
   &:disabled {
     text-decoration: none;

diff --git a/packages/formation/sass/base/_b-variables.scss b/packages/formation/sass/base/_b-variables.scss
@@ -83,11 +83,17 @@ $color-green-light:          #4aa564;
 $color-gold-lightest:        #fff1d2;
 $color-gold-lighter:         #fad980;
 $color-gold-light:           #f9c642;
+$color-gold-50v:             #936F38; // This is something that's not in USWDS 1.6
 
 $color-visited:              $color-purple;
 $color-focus:                #3e94cf;
 
-$focus-outline:              2px solid $color-gold-light;
+// The focus outline is only used for anchor links in the main body
+// See this article for details:
+//  https://adhoc.team/2022/02/08/creating-focus-style-for-themable-design-system/
+// A double `box-shadow` is used for other focus styling, including
+// links in the header & footer since they are unlikely to wrap
+$focus-outline:              2px solid $color-gold-50v;
 
 $color-cool-blue:           #205493;
 $color-cool-blue-light:     #4773aa;

diff --git a/packages/formation/sass/base/_va.scss b/packages/formation/sass/base/_va.scss
@@ -35,7 +35,7 @@ body {
   &:focus {
     position: inherit;
     top: auto;
-    outline: 2px solid $color-gold;
+    @include focus-gold-vivid-outline;
   }
 }
 
@@ -97,6 +97,18 @@ a {
   }
 }
 
+// Use outline focus styling for links in the main content area
+// since box-shadow styling doesn't look good on wrapped links
+main [href],
+va-banner [href] {
+  &:focus {
+    outline: $focus-outline;
+    background: $color-white;
+    color: $color-link-default;
+    box-shadow: unset;
+  }
+}
+
 // ====== Headings
 
 // H1 should only be used once at the top-level, so we can safely remove the margin-top.

diff --git a/packages/formation/sass/modules/_m-form-process.scss b/packages/formation/sass/modules/_m-form-process.scss
@@ -214,7 +214,7 @@
 }
 
 .schemaform-array-row-title:focus {
-  @include focus-gold-light-outline;
+  @include focus-gold-vivid-outline;
   display: inline-block;
 }
 

diff --git a/packages/formation/sass/modules/_m-nav-sidebar.scss b/packages/formation/sass/modules/_m-nav-sidebar.scss
@@ -206,8 +206,7 @@ $level-3-hover-padding: 8px 12px 8px 30px;
       }
 
       &:focus {
-        outline: 2px solid $color-gold;
-        outline-offset: 3px;
+        @include focus-gold-vivid-outline;
       }
     }
 
@@ -286,7 +285,7 @@ $level-3-hover-padding: 8px 12px 8px 30px;
       font-size: 15px;
 
       &:focus {
-        @include focus-gold-light-outline(0);
+        @include focus-gold-vivid-outline;
       }
 
       &:hover, &:focus {