From b20ba2349eff6c230d148a1db8acc3b7d337edf0 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 23 Sep 2020 10:50:43 +0100
Subject: [PATCH] Replace uses of $yellow for focus

There are a few places where we missed updating to the new focus styles
because they were using the `$yellow` SASS variable and not the
`$focus-colour` variable.

This commit updates them to the new colour, and where needed adds the
black lower border to match.
---
 app/assets/stylesheets/components/banner.scss   | 17 +++++++++--------
 .../stylesheets/components/file-upload.scss     |  3 ++-
 app/assets/stylesheets/components/message.scss  |  7 -------
 .../stylesheets/components/placeholder.scss     |  4 ++--
 app/assets/stylesheets/components/table.scss    |  5 ++++-
 5 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index f32aa818b..ab5aa979c 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -56,7 +56,7 @@
   text-align: left;
 
   &:focus {
-    outline: 3px solid $yellow;
+    outline: 3px solid $govuk-focus-colour;
   }
 
   .list {
@@ -134,16 +134,17 @@
       color: $white;
     }
 
-    &:focus,
-    &:active {
-      color: $govuk-focus-text-colour;
-      outline: 10px solid $yellow;
-    }
-
     &:hover {
       color: $white;
       background-color: $link-hover-colour;
-      outline: 10px solid $link-hover-colour;
+      box-shadow: 0 0 0 10px solid $link-hover-colour;
+    }
+
+    &:focus,
+    &:active {
+      color: $govuk-focus-text-colour;
+      background-color: $govuk-focus-colour;
+      box-shadow: 0 0 0 10px $govuk-focus-colour, 0 4px 0 10px $govuk-focus-text-colour;
     }
 
   }
diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss
index 5e99592f2..981183826 100644
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/app/assets/stylesheets/components/file-upload.scss
@@ -23,7 +23,8 @@
       z-index: -1;
 
       &:focus + .file-upload-button {
-        outline: 3px solid $yellow;
+        background: $govuk-focus-colour;
+        color: $govuk-focus-text-colour;
       }
 
     }
diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 07691834d..2cd63fdbf 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -41,13 +41,6 @@ $message-type-bottom-spacing: govuk-spacing(4);
         border-color: $link-hover-colour;
       }
 
-      &:focus {
-        // Use box shadow instead of outline to avoid buggy outline
-        // rendering in Firefox
-        outline: none;
-        box-shadow: 0 0 0 3px $yellow;
-      }
-
       .message-name-separator {
 
         margin-right: -2px;
diff --git a/app/assets/stylesheets/components/placeholder.scss b/app/assets/stylesheets/components/placeholder.scss
index a9b85d525..00724e557 100644
--- a/app/assets/stylesheets/components/placeholder.scss
+++ b/app/assets/stylesheets/components/placeholder.scss
@@ -2,7 +2,7 @@
 .placeholder {
 
   display: inline;
-  background: $yellow;
+  background: $govuk-focus-colour;
   color: $text-colour;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -53,7 +53,7 @@
   }
 
   *:focus + p & {
-    box-shadow: inset 0 -0.35em 0 0 $yellow;
+    box-shadow: inset 0 -0.35em 0 0 $govuk-focus-colour;
   }
 
 }
diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 62278cce0..14ae48f10 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -272,8 +272,11 @@
 
       &:focus {
 
+        box-shadow: none;
+
         &:before {
-          background: $yellow;
+          background: $govuk-focus-colour;
+          box-shadow: inset 0 -4px 0 0 $govuk-focus-text-colour;
           z-index: -1;
         }