Adjust focus states

This adds the govuk-link class to multiple links throughout the codebase
in order to inherit the correct styles, and updates related tests. Where
the class is overridden by govuk-template the styles have been updated to
use a temporary mixin to enforce the correct colour state and the class is
locally overridden where white links are needed.

app/assets/stylesheets/components/_back-to-top.scss

@@ -4,9 +4,6 @@
   margin-left: govuk-spacing(3);
   margin-right: govuk-spacing(3);
 
-  &:focus {
-    @include govuk-focused-text;
-  }
 }
 
 .app-c-back-to-top__icon {

app/assets/stylesheets/components/_important-metadata.scss

@@ -1,7 +1,6 @@
 .app-c-important-metadata {
-  @include white-links;
   background: $govuk-blue;
-  color: $white;
+  color: govuk-colour("white");
   padding: govuk-spacing(3);
 
   @include media(tablet) {
@@ -30,7 +29,12 @@
 .app-c-important-metadata__definition {
   font-weight: bold;
 
-  a:focus {
-    @include govuk-focused-text;
+  .app-link {
+    color: govuk-colour("white");
+
+    &:focus {
+      @include govuk-template-link-focus-override;
+    }
   }
+
 }

app/assets/stylesheets/components/_published-dates.scss

@@ -6,18 +6,19 @@
 .app-c-published-dates__toggle {
   display: none;
 
-  &:focus {
-    @include govuk-focused-text;
-  }
-
   .js-enabled & {
     display: inline-block;
   }
+
+  &:focus {
+    @include govuk-template-link-focus-override;
+  }
+
 }
 
 .app-c-published-dates__history-link {
   &:focus {
-    @include govuk-focused-text;
+    @include govuk-template-link-focus-override;
   }
 }
 

app/assets/stylesheets/components/_publisher-metadata.scss

@@ -8,7 +8,7 @@
   font-weight: bold;
 
   &:focus {
-    @include govuk-focused-text;
+    @include govuk-template-link-focus-override;
   }
 }
 

app/assets/stylesheets/helpers/_parts.scss

@@ -29,7 +29,7 @@
         display: block;
 
         &:focus {
-          @include govuk-focused-text;
+          @include govuk-template-link-focus-override;
         }
       }
     }

app/assets/stylesheets/mixins/_govuk-template-link-focus-override.scss

@@ -0,0 +1,9 @@
+// TODO: Remove when appropriate
+// govuk_template overrides the styles set by
+// govuk-frontend 3.0.0. This mixin is intended as a temporary fix
+// to ensure focus styles are as expected in apps using govuk_template
+
+@mixin govuk-template-link-focus-override {
+  @include govuk-focused-text;
+  color: govuk-colour("black") !important;
+}

app/presenters/content_item/linkable.rb

@@ -37,7 +37,7 @@ def links_group(types)
 
     def organisations_ordered_by_importance
       organisations_with_emphasised_first.map do |link|
-        link_to(link["title"], link["base_path"])
+        link_to(link["title"], link["base_path"], class: "govuk-link")
       end
     end
 
@@ -54,12 +54,12 @@ def emphasised_organisations
 
     def link_for_type(type, link)
       return link_for_world_location(link) if type == "world_locations"
-      link_to(link["title"], link["base_path"])
+      link_to(link["title"], link["base_path"], class: "govuk-link")
     end
 
     def link_for_world_location(link)
       base_path = WorldLocationBasePath.for(link)
-      link_to(link["title"], base_path)
+      link_to(link["title"], base_path, class: "govuk-link")
     end
   end
 end

app/presenters/content_item/parts.rb

@@ -86,7 +86,7 @@ def current_part
     def part_links
       parts.map.with_index(1) do |part, position|
         if part['slug'] != current_part['slug']
-          link_to part['title'], part['full_path'],
+          link_to part['title'], part['full_path'], class: "govuk-link",
             data: {
             track_category: 'contentsClicked',
             track_action: "content_item #{position}",

app/presenters/fatality_notice_presenter.rb

@@ -18,7 +18,7 @@ def image
   def important_metadata
     super.tap do |m|
       if field_of_operation
-        m.merge!('Field of operation' => link_to(field_of_operation.title, field_of_operation.path))
+        m.merge!('Field of operation' => link_to(field_of_operation.title, field_of_operation.path, class: "govuk-link app-link"))
       end
     end
   end

app/presenters/specialist_document_presenter.rb

@@ -168,7 +168,7 @@ def facet_block(facet, allowed_value)
 
   def facet_link(label, value, key)
     finder_base_path = finder['base_path']
-    link_to(label, "#{finder_base_path}?#{key}%5B%5D=#{value}")
+    link_to(label, "#{finder_base_path}?#{key}%5B%5D=#{value}", class: "govuk-link app-link")
   end
 
   def first_published_at_facet_key

app/views/components/_back-to-top.html.erb

@@ -1,7 +1,7 @@
 <%
   text ||= t('content_item.contents', default: "Contents")
 %>
-<a class="app-c-back-to-top dont-print"
+<a class="govuk-link app-c-back-to-top dont-print"
     href="<%= href %>">
     <svg class="app-c-back-to-top__icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
       <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"/>

app/views/components/_print-link.html.erb

@@ -5,7 +5,7 @@
 <div class="app-c-print-link">
   <a
     href="<%= href %>"
-    class="app-c-print-link__link"
+    class="app-c-print-link__link govuk-link"
     rel="alternate"
   >
     <%= link_text %>

app/views/components/_published-dates.html.erb

@@ -14,10 +14,10 @@
   <% if last_updated %>
     <% if published %><br /><% end %>Last updated <%= last_updated %>
     <% if link_to_history && history.empty? %>
-      &mdash; <a href="#history" class="app-c-published-dates__history-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
+      &mdash; <a href="#history" class="app-c-published-dates__history-link govuk-link"><%= t('components.published_dates.see_all_updates', locale: :en) %></a>
     <% elsif history.any? %>
       <a href="#full-history"
-      class="app-c-published-dates__toggle"
+      class="app-c-published-dates__toggle govuk-link"
       data-controls="full-history"
       data-expanded="false"
       data-toggled-text="&#45;&nbsp;<%= t('components.published_dates.hide_all_updates', locale: :en) %>">&#43;&nbsp;<%= t('components.published_dates.show_all_updates', locale: :en) %></a>

test/presenters/case_study_presenter_test.rb

@@ -42,9 +42,9 @@ def schema_name
     }
 
     expected_from_links = [
-      link_to('Lead org', '/orgs/lead'),
-      link_to('Supporting org', '/orgs/supporting'),
-      link_to('DFID Pakistan', '/government/world/organisations/dfid-pakistan'),
+      link_to('Lead org', '/orgs/lead', class: "govuk-link"),
+      link_to('Supporting org', '/orgs/supporting', class: "govuk-link"),
+      link_to('DFID Pakistan', '/government/world/organisations/dfid-pakistan', class: "govuk-link"),
     ]
 
     assert_equal expected_from_links, presented_item(schema_name, with_organisations).from
@@ -60,9 +60,9 @@ def schema_name
     ]
 
     expected_part_of_links = [
-      link_to('Work Programme real life stories', '/government/collections/work-programme-real-life-stories'),
-      link_to('Cheese', '/policy/cheese'),
-      link_to('Pakistan', '/world/pakistan/news'),
+      link_to('Work Programme real life stories', '/government/collections/work-programme-real-life-stories', class: "govuk-link"),
+      link_to('Cheese', '/policy/cheese', class: "govuk-link"),
+      link_to('Pakistan', '/world/pakistan/news', class: "govuk-link"),
     ]
     assert_equal expected_part_of_links, presented_item(schema_name, with_extras).part_of
   end

test/presenters/content_item/linkable_test.rb

@@ -24,7 +24,7 @@ def initialize
     ]
 
     expected_from_links = [
-      %{<a href="/government/people/winston-churchill">Winston Churchill</a>}
+      %{<a class="govuk-link" href="/government/people/winston-churchill">Winston Churchill</a>}
     ]
     assert_equal expected_from_links, item.from
   end
@@ -55,7 +55,7 @@ def initialize
     ]
 
     expected_from_links = [
-      %{<a href="/world/germany/news">Germany</a>}
+      %{<a class=\"govuk-link\" href="/world/germany/news">Germany</a>}
     ]
     assert_equal expected_from_links, item.part_of
   end

test/presenters/content_item/parts_test.rb

@@ -154,7 +154,7 @@ def requested_content_item_path
     assert_equal @parts.parts_navigation,
       [[
         "first-title",
-        "<a data-track-category=\"contentsClicked\" data-track-action=\"content_item 2\" "\
+        "<a class=\"govuk-link\" data-track-category=\"contentsClicked\" data-track-action=\"content_item 2\" "\
         "data-track-label=\"/base-path/second-slug\" "\
         "data-track-options=\"{&quot;dimension29&quot;:&quot;second-title&quot;}\" "\
         "href=\"/base-path/second-slug\">second-title</a>"
@@ -212,17 +212,17 @@ def content_item
 
     assert_equal @parts.parts_navigation, [
         [
-          "first-title", "<a data-track-category=\"contentsClicked\" "\
+          "first-title", "<a class=\"govuk-link\" data-track-category=\"contentsClicked\" "\
           "data-track-action=\"content_item 2\" data-track-label=\"/base-path/second-slug\" "\
           "data-track-options=\"{&quot;dimension29&quot;:&quot;second-title&quot;}\" "\
           "href=\"/base-path/second-slug\">second-title</a>"
         ],
         [
-          "<a data-track-category=\"contentsClicked\" data-track-action=\"content_item 3\" "\
+          "<a class=\"govuk-link\" data-track-category=\"contentsClicked\" data-track-action=\"content_item 3\" "\
           "data-track-label=\"/base-path/third-slug\" "\
           "data-track-options=\"{&quot;dimension29&quot;:&quot;third-title&quot;}\" "\
           "href=\"/base-path/third-slug\">third-title</a>",
-          "<a data-track-category=\"contentsClicked\" data-track-action=\"content_item 4\" "\
+          "<a class=\"govuk-link\" data-track-category=\"contentsClicked\" data-track-action=\"content_item 4\" "\
           "data-track-label=\"/base-path/fourth-slug\" "\
           "data-track-options=\"{&quot;dimension29&quot;:&quot;fourth-title&quot;}\" "\
           "href=\"/base-path/fourth-slug\">fourth-title</a>"

test/presenters/publication_presenter_test.rb

@@ -37,17 +37,17 @@ def schema_name
 
   test '#from presents people' do
     minister = schema_item["links"]["people"][0]
-    assert presented_item.from.include?("<a href=\"#{minister['base_path']}\">#{minister['title']}</a>")
+    assert presented_item.from.include?("<a class=\"govuk-link\" href=\"#{minister['base_path']}\">#{minister['title']}</a>")
   end
 
   test '#part_of presents topical events' do
     event = schema_item["links"]["topical_events"][0]
-    assert presented_item.part_of.include?("<a href=\"#{event['base_path']}\">#{event['title']}</a>")
+    assert presented_item.part_of.include?("<a class=\"govuk-link\" href=\"#{event['base_path']}\">#{event['title']}</a>")
   end
 
   test '#part_of presents related statistical data sets' do
     data_set = schema_item("statistics_publication")["links"]["related_statistical_data_sets"][0]
-    assert presented_item("statistics_publication").part_of.include?("<a href=\"#{data_set['base_path']}\">#{data_set['title']}</a>")
+    assert presented_item("statistics_publication").part_of.include?("<a class=\"govuk-link\" href=\"#{data_set['base_path']}\">#{data_set['title']}</a>")
   end
 
   test '#national_statistics? matches national statistics documents' do

test/presenters/specialist_document_presenter_test.rb

@@ -131,6 +131,7 @@ class PresentedSpecialistDocumentWithFinderFacets < SpecialistDocumentTestCase
     def example_with_finder_facets(facets = [], values = {})
       example = schema_item('aaib-reports')
       example_finder = {
+        "class" => "govuk-link",
         "base_path" => "/finder-base-path",
         "title" => "Finder title",
         "details" => {
@@ -267,7 +268,7 @@ def example_facet(overrides = {})
       example = example_with_finder_facets([example_facet(overrides)], values)
 
       presented = present_example(example)
-      expected_link = "<a href=\"/finder-base-path?facet-key%5B%5D=something\">Something</a>"
+      expected_link = "<a class=\"govuk-link app-link\" href=\"/finder-base-path?facet-key%5B%5D=something\">Something</a>"
       assert_equal expected_link, presented.important_metadata["Facet name"]
     end
 

test/presenters/speech_presenter_test.rb

@@ -39,7 +39,7 @@ class PresentedSpeech < SpeechTestCase
     end
 
     test 'from includes speaker' do
-      assert presented_item.from.include?("<a href=\"/government/people/andrea-leadsom\">The Rt Hon Andrea Leadsom MP</a>")
+      assert presented_item.from.include?("<a class=\"govuk-link\" href=\"/government/people/andrea-leadsom\">The Rt Hon Andrea Leadsom MP</a>")
     end
   end
 
@@ -88,8 +88,8 @@ def example_schema_name
 
     test 'includes speaker without profile in from_with_speaker' do
       assert_equal [
-        "<a href=\"/government/organisations/prime-ministers-office-10-downing-street\">Prime Minister&#39;s Office, 10 Downing Street</a>",
-        "<a href=\"/government/organisations/cabinet-office\">Cabinet Office</a>",
+        "<a class=\"govuk-link\" href=\"/government/organisations/prime-ministers-office-10-downing-street\">Prime Minister&#39;s Office, 10 Downing Street</a>",
+        "<a class=\"govuk-link\" href=\"/government/organisations/cabinet-office\">Cabinet Office</a>",
         "Her Majesty the Queen"
         ], presented_item(example_schema_name).from
     end

test/presenters/statistics_announcement_presenter_test.rb

@@ -9,7 +9,7 @@ def schema_name
 
   test 'presents from as links to organisations' do
     links = [
-      link_to('NHS England', '/government/organisations/nhs-commissioning-board')
+      link_to('NHS England', '/government/organisations/nhs-commissioning-board', class: "govuk-link")
     ]
     assert_equal links, statistics_announcement.from
   end

test/presenters/travel_advice_presenter_test.rb

@@ -93,16 +93,16 @@ def schema_name
       another_part_nav_item = navigation_items[0][2]
 
       assert_equal summary_nav_item,
-        "<a data-track-category=\"contentsClicked\" data-track-action=\"content_item 1\" "\
-        "data-track-label=\"/foreign-travel-advice/albania\" "\
-        "data-track-options=\"{&quot;dimension29&quot;:&quot;Summary&quot;}\" "\
-        "href=\"/foreign-travel-advice/albania\">Summary</a>"
+                   "<a class=\"govuk-link\" data-track-category=\"contentsClicked\" data-track-action=\"content_item 1\" "\
+                   "data-track-label=\"/foreign-travel-advice/albania\" "\
+                   "data-track-options=\"{&quot;dimension29&quot;:&quot;Summary&quot;}\" "\
+                   "href=\"/foreign-travel-advice/albania\">Summary</a>"
       assert_equal current_part_nav_item, current_part['title']
       assert_equal another_part_nav_item,
-        "<a data-track-category=\"contentsClicked\" data-track-action=\"content_item 3\" "\
-        "data-track-label=\"/foreign-travel-advice/albania/terrorism\" "\
-        "data-track-options=\"{&quot;dimension29&quot;:&quot;Terrorism&quot;}\" "\
-        "href=\"/foreign-travel-advice/albania/terrorism\">Terrorism</a>"
+                   "<a class=\"govuk-link\" data-track-category=\"contentsClicked\" data-track-action=\"content_item 3\" "\
+                   "data-track-label=\"/foreign-travel-advice/albania/terrorism\" "\
+                   "data-track-options=\"{&quot;dimension29&quot;:&quot;Terrorism&quot;}\" "\
+                   "href=\"/foreign-travel-advice/albania/terrorism\">Terrorism</a>"
     end
 
     test "navigation items link to all parts" do