From 10ab1dfe720df9f13fa38cf35fe2ead828e7964d Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 27 Jan 2022 14:56:15 +0000
Subject: [PATCH] Fix focus bug in Safari

Most browsers apply the focus style when a link is
clicked but Safari just applies the active style.
This meant our large links, with expanded click
areas, didn't get the focus style themselves but
their psuedo-elements (which create the expanded
click area) did.

This adds the focus styles to the active state of
links with the expanded click area, to ensure all
of their click area gets the focus style.
---
 app/assets/stylesheets/components/message.scss | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index 2e9229e51..11b309e4a 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -108,17 +108,22 @@ a {
           }
         }
 
-        &:active,
-        &:focus {
+        &:focus,
+        &:active {
 
+          &,
           &::before {
             background-color: $govuk-focus-colour;
-            box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
           }
 
+          &,
           & + .template-list-item-hint,
           .message-type {
-            color: $govuk-text-colour;
+            color: $govuk-focus-text-colour;
+          }
+
+          &::before {
+            box-shadow: 0px -2px $govuk-focus-colour, 0px 4px $govuk-focus-text-colour;
           }
 
         }
@@ -177,7 +182,8 @@ a {
       background-image: file-url('folder-blue-bold-hover.svg');
     }
 
-    &:focus {
+    &:focus,
+    &:active {
       background-image: file-url('folder-black-bold.svg');
     }