From 5ad8f41123c4d99728ce622849f0a53aa33aea6c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 25 Jan 2022 21:20:39 +0000
Subject: [PATCH 1/2] Add large link, no hint variant to file-list

At present the file-list pattern assumes each
item has hint text below the link and so increases
the hit area to overlap the hint. This adds a
variant for items without one and uses it on the
page for choosing an alert sub-area.
---
 app/assets/stylesheets/views/dashboard.scss             | 8 ++++++++
 app/templates/views/broadcast/areas-with-sub-areas.html | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index 4e9f9be45..f97c98c39 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -68,6 +68,14 @@
     margin-top: -10px;
   }
 
+  &-filename-large-no-hint {
+    padding-bottom: 0;
+    padding-top: 5px;
+    margin-bottom: 0;
+    margin-top: 5px;
+    overflow: visible; // don't cut off thicker underline
+  }
+
   &-filename-unlinked {
     @include core-19;
   }
diff --git a/app/templates/views/broadcast/areas-with-sub-areas.html b/app/templates/views/broadcast/areas-with-sub-areas.html
index 594f15129..463c61555 100644
--- a/app/templates/views/broadcast/areas-with-sub-areas.html
+++ b/app/templates/views/broadcast/areas-with-sub-areas.html
@@ -25,7 +25,7 @@
 
   {% for area in library|sort %}
     <div class="file-list-item">
-      <a class="file-list-filename-large govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_broadcast_sub_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, library_slug=library.id, area_slug=area.id) }}">{{ area.name }}</a>
+      <a class="file-list-filename-large file-list-filename-large-no-hint govuk-link govuk-link--no-visited-state" href="{{ url_for('.choose_broadcast_sub_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, library_slug=library.id, area_slug=area.id) }}">{{ area.name }}</a>
     </div>
   {% endfor %}
 

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 2/2] 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');
     }