From ebb84fcf08fbc1d13ae8288c4863e8690f282492 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Sep 2020 16:18:26 +0100
Subject: [PATCH] Fix focus styles for user-list-edit-link

---
 app/assets/stylesheets/views/users.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss
index a30f04741..7dc8a6bf8 100644
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -53,6 +53,11 @@ $item-top-padding: govuk-spacing(3);
       margin: 0;
     }
 
+    &:focus {
+      /* cancel default focus styling in favour of that from :before pseudo class */
+      box-shadow: none;
+    }
+
     &:before {
       content: "";
       display: block;
@@ -69,14 +74,13 @@ $item-top-padding: govuk-spacing(3);
 
     &:active:before,
     &:focus:before {
-      border-color: $yellow;
-      border-style: solid;
-      border-width: 15px 3px;
+      box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 3px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
       right: -3px;
       left: -3px;
 
       @include govuk-media-query($from: tablet) {
         border-width: 15px 3px 15px 15px;
+        box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
         left: -15px;
       }
     }