Merge pull request #1309 from alphagov/new-focus-links

Update links (and things that look like links) to use the new focus style

CHANGELOG.md

@@ -4,6 +4,12 @@
 
 💥 Breaking changes:
 
+- Update links (and things that look like links) to use the new focus style
+
+  To migrate: [TODO add migration instructions before we ship v3.0.0]
+
+  ([PR #1309](https://github.com/alphagov/govuk-frontend/pull/1309))
+
 - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow`
 
   To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`.

src/components/back-link/_back-link.scss

@@ -25,6 +25,12 @@
     // Underline is provided by a bottom border
     text-decoration: none;
 
+    // When the back link is focused, hide the bottom link border as the
+    // focus styles has a bottom border.
+    &:focus {
+      border-bottom-color: transparent;
+    }
+
     // Prepend left pointing arrow
     &:before {
       @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px);

src/components/details/_details.scss

@@ -27,25 +27,22 @@
     // Style the summary to look like a link...
     color: $govuk-link-colour;
     cursor: pointer;
+
+    &:hover {
+      color: $govuk-link-hover-colour;
+    }
+
+    @include govuk-focusable-text-link;
   }
 
   // ...but only underline the text, not the arrow
   .govuk-details__summary-text {
     text-decoration: underline;
   }
 
-  .govuk-details__summary:hover {
-    color: $govuk-link-hover-colour;
-  }
-
-  .govuk-details__summary:focus {
-    // -1px offset fixes gap between background and outline in Firefox
-    outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour;
-    outline-offset: -1px;
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
-    color: $govuk-focus-text-colour;
-    background: $govuk-focus-colour;
+  // Remove the underline when focussed to avoid duplicate borders
+  .govuk-details__summary:focus .govuk-details__summary-text {
+    text-decoration: none;
   }
 
   // Remove the default details marker so we can style our own consistently and
@@ -59,7 +56,7 @@
     content: "";
     position: absolute;
 
-    top: 0;
+    top: -1px;
     bottom: 0;
     left: 0;
 

src/components/error-summary/_error-summary.scss

@@ -38,7 +38,7 @@
   }
 
   .govuk-error-summary__list a {
-    @include govuk-focusable-fill;
+    @include govuk-focusable-text-link;
     @include govuk-typography-weight-bold;
 
     // Override default link styling to use error colour
@@ -54,15 +54,6 @@
     &:focus {
       color: $govuk-focus-text-colour;
     }
-
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-error-colour;
-      }
-    }
   }
 
 }

src/components/header/_header.scss

@@ -65,8 +65,6 @@
   }
 
   .govuk-header__link {
-    @include govuk-focusable-fill;
-
     text-decoration: none;
 
     &:link,
@@ -78,6 +76,8 @@
       text-decoration: underline;
     }
 
+    @include govuk-focusable-text-link;
+
     // When focussed, the text colour needs to be darker to ensure that colour
     // contrast is still acceptable
     &:focus {
@@ -116,6 +116,11 @@
       // specified currentColor explicitly IE8 would ignore this rule.
       border-bottom: 1px solid;
     }
+
+    // Remove any borders that show when focused and hovered.
+    &:focus {
+      border-bottom: 0;
+    }
   }
 
   .govuk-header__link--service-name {

src/components/skip-link/_skip-link.scss

@@ -5,7 +5,8 @@
 @include govuk-exports("govuk/component/skip-link") {
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
-    @include govuk-link-common;
+    @include govuk-typography-common;
+    @include govuk-focusable-fill;
     @include govuk-link-style-text;
     @include govuk-typography-responsive($size: 16);
 

src/helpers/_focusable.scss

@@ -32,3 +32,35 @@
     background-color: $govuk-focus-colour;
   }
 }
+
+/// Focusable with box-shadow
+///
+/// Removes the visible outline and replace with box-shadow and background colour.
+/// Used for interactive text-based elements.
+///
+/// @access public
+
+@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;
+  }
+}

src/helpers/_links.scss

@@ -10,7 +10,7 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
-  @include govuk-focusable-fill;
+  @include govuk-focusable-text-link;
 }
 
 /// Default link style mixin