Update links, and things that look like links

Updates, and hacks, based on the changes in:

https://github.com/alphagov/govuk-frontend/pull/1309/files

app/assets/stylesheets/govuk-frontend/_all.scss

@@ -12,28 +12,39 @@ $govuk-compatibility-govukelements: true;
 $govuk-assets-path: "/static/";
 
 @import "settings/all";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/settings";
 @import "tools/all";
 @import "helpers/all";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/helpers";
 
 @import "core/all";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/core";
 @import "objects/all";
 
-// section replacing @import 'components/all', specifying which components to include
+// section replacing @import "components/all", specifying which components to include
-@import 'components/skip-link/_skip-link';
+@import "components/skip-link/_skip-link";
-@import 'components/header/_header';
+@import "components/header/_header";
-@import 'components/footer/_footer';
+@import "components/footer/_footer";
-@import 'components/back-link/_back-link';
+@import "components/back-link/_back-link";
-@import 'components/button/_button';
+@import "components/button/_button";
-@import 'components/details/_details';
+@import "components/details/_details";
-@import 'components/radios/_radios';
+@import "components/radios/_radios";
-@import 'components/checkboxes/_checkboxes';
+@import "components/checkboxes/_checkboxes";
-@import 'components/input/_input';
+@import "components/input/_input";
+
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/components";
 
 @import "utilities/all";
 @import "overrides/all";
 
 // Styles extending those from GOV.UK Frontend
-@import './extensions';
+@import "./extensions";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/extensions";
 
 // Styles for GOV.UK Frontend components specific to this application
-@import './overrides';
+@import "./overrides";

app/assets/stylesheets/govuk-frontend/focus/components.scss

@@ -0,0 +1,56 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
+
+// Updates to skip-link component
+.govuk-skip-link {
+  @include govuk-typography-common;
+  @include govuk-focusable-fill;
+}
+
+// Updates to header component
+.govuk-header__link {
+  @include govuk-focusable-text-link;
+}
+
+.govuk-header__link--homepage {
+  // Remove any borders that show when focused and hovered.
+  &:focus {
+    border-bottom: 0;
+  }
+}
+
+// Updates to back-link component
+.govuk-back-link {
+  @include govuk-focusable-text-link;
+
+  // When the back link is focused, hide the bottom link border as the
+  // focus styles has a bottom border.
+  &:focus {
+    border-bottom-color: transparent;
+  }
+}
+
+// Updates to details component
+.govuk-details__summary {
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  @include govuk-focusable-text-link;
+}
+
+// Remove the underline when focussed to avoid duplicate borders
+.govuk-details__summary:focus .govuk-details__summary-text {
+  text-decoration: none;
+}
+
+.govuk-details__summary:before {
+  top: 0;
+}

app/assets/stylesheets/govuk-frontend/focus/helpers.scss

@@ -0,0 +1,39 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
+
+/// Focusable with box-shadow
+///
+/// Removes the visible outline and replace with box-shadow and background colour.
+/// Used for interactive text-based elements.
+
+@mixin govuk-focusable-text-link {
+  &:focus {
+    // When colours are overridden, for example when users have a dark mode,
+    // backgrounds and box-shadows disappear, so we need to ensure there's a
+    // transparent outline which will be set to a visible colour.
+
+    // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
+    @include govuk-not-ie8 {
+      outline: $govuk-focus-width solid transparent;
+      outline-offset: 0;
+    }
+    color: $govuk-text-colour;
+    background-color: $govuk-focus-colour;
+    // sass-lint:disable indentation
+    box-shadow: -5px -1px 0 1px $govuk-focus-colour,
+                5px -1px 0 1px $govuk-focus-colour,
+                -3px 1px 0 3px $govuk-text-colour,
+                3px 1px 0 3px $govuk-text-colour;
+    // sass-lint:enable indentation
+    // When link is focussed, hide the default underline since the
+    // box shadow adds the "underline"
+    text-decoration: none;
+  }
+}

app/assets/stylesheets/govuk-frontend/focus/settings.scss

@@ -0,0 +1,11 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// The new 'yellow' colour was added in https://github.com/alphagov/govuk-frontend/pull/1288
+
+$govuk-focus-colour: #ffdd00; // assign new 'yellow' colour directly to limit impact of change