From 6d883f81901a7d03f9a5438af477c45acc1b4840 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Thu, 12 Mar 2020 21:02:04 +0000
Subject: [PATCH] Refactor banner link focus states

 - The global link styles from static / govuk_template were clashing with
   govuk-link - so the link styles for the warning banner layout have been
   updated to not use govuk-link.
 - Focus state styles comes from the GOV.UK Frontend mixin.
---
 app/assets/stylesheets/helpers/_header.scss  | 12 ++++++++++--
 app/views/notifications/_global_bar.html.erb | 14 +++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/helpers/_header.scss b/app/assets/stylesheets/helpers/_header.scss
index 55a77cf10..cdbb3ee9d 100644
--- a/app/assets/stylesheets/helpers/_header.scss
+++ b/app/assets/stylesheets/helpers/_header.scss
@@ -528,12 +528,20 @@ $light-blue: #259EDA;
   padding: govuk-spacing(5) 0;
 
   .global-bar-message {
-    .global-bar-title:link {
+    .global-bar-title {
       color: govuk-colour("white");
+
+      &:focus {
+        @include govuk-focused-text;
+      }
     }
   }
 
-  .global-bar__dismiss:link {
+  .global-bar__dismiss {
     color: govuk-colour("white");
+
+      &:focus {
+        @include govuk-focused-text;
+      }
   }
 }
diff --git a/app/views/notifications/_global_bar.html.erb b/app/views/notifications/_global_bar.html.erb
index f76c29145..601045c3a 100644
--- a/app/views/notifications/_global_bar.html.erb
+++ b/app/views/notifications/_global_bar.html.erb
@@ -15,6 +15,14 @@
 
   global_bar_classes = %w(global-bar dont-print)
   global_bar_classes << "global-bar--warning" if warning
+
+  title_classes = %w(global-bar-title)
+  title_classes << "js-call-to-action" if title_href
+  title_classes << "govuk-link" if title_href && !warning
+
+  dismiss_classes = %w(global-bar__dismiss dismiss)
+  dismiss_classes << "govuk-link" unless warning
+
 -%>
 
 <% if show_global_bar %>
@@ -32,9 +40,9 @@
     <p class="global-bar-message">
       <% if title %>
         <% if title_href %>
-          <a class="global-bar-title govuk-link js-call-to-action" href="<%= title_href %>"><%= title %></a>
+          <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>"><%= title %></a>
         <% else %>
-          <span class="global-bar-title"><%= title %></span>
+          <span class="<%= title_classes.join(' ') %>"><%= title %></span>
         <% end %>
       <% end %>
 
@@ -52,7 +60,7 @@
       <% end %>
     </p>
     <a href="#hide-message"
-       class="govuk-link global-bar__dismiss dismiss"
+       class="<%= dismiss_classes.join(' ') %>"
        role="button"
        aria-controls="global-bar">Hide&nbsp;message</a>
     </div>