Fix focus state on step-by-step nav

alphagov · Aug 7, 2019 · 6dda899 · 6dda899
1 parent d01dc55
commit 6dda899
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss b/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
@@ -50,6 +50,10 @@ $top-border: solid 2px $grey-3;
   background: none;
   border: 0;
   margin: 0;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 // removes extra dotted outline from buttons in Firefox
@@ -238,7 +242,11 @@ $top-border: solid 2px $grey-3;
 
   .gem-c-step-nav__button {
     &:focus {
-      outline: $govuk-focus-width solid $govuk-focus-colour;
+      @include govuk-focused-text;
+
+      .gem-c-step-nav__toggle-link {
+        @include govuk-focused-text;
+      }
     }
   }
 
@@ -253,6 +261,12 @@ $top-border: solid 2px $grey-3;
     }
   }
 
+  &:focus {
+    .gem-c-step-nav__button {
+      color: $govuk-focus-text-colour;
+    }
+  }
+
   .gem-c-step-nav--large & {
     @include media(tablet) {
       padding: $gutter 0;