Merge pull request #2084 from alphagov/further-visited-focus-state-re…

…factorings Refactor banner link focus states
alphagov · Mar 12, 2020 · df913d3 · df913d3
2 parents 4c1d30c + 6d883f8
commit df913d3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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>