From 6dda899e85c7cc6f5d49fc827caabbfa4ff37f3a Mon Sep 17 00:00:00 2001
From: Alex Jurubita <alexandru.jurubita@digital.cabinet-office.gov.uk>
Date: Wed, 7 Aug 2019 11:09:13 +0100
Subject: [PATCH] Fix focus state on step-by-step nav

---
 .../components/_step-by-step-nav.scss            | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 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
index 287a3b03eb..a2ba1f000d 100644
--- 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;