Merge pull request #3819 from alphagov/image-link-focus-styles

Add linked image focus style

CHANGELOG.md

@@ -39,6 +39,22 @@ The new link styles are now enabled by default. If you are setting `$govuk-new-l
 
 This change was made in [pull request #3599: Enable new link styles by default](https://github.com/alphagov/govuk-frontend/pull/3599) and [pull request #3600: Remove new link styles feature flag](https://github.com/alphagov/govuk-frontend/pull/3600).
 
+#### Added focus style for links containing non-text content
+
+We've added a new focus style for use with non-text content, such as links containing images and focusable elements that aren't form controls. This new style paints a visible yellow and black outline around the entire element, ensuring that the focus style is visible in all situations.
+
+For links containing images, we've added the `govuk-link-image` class. This class should be used on links that _only_ contain an image. If it also contains text, continue to use `govuk-link` instead.
+
+```html
+<a class="govuk-link-image" href="#">
+  <img src="..." alt="...">
+</a>
+```
+
+These styles can be used in your own code by including the `govuk-focused-box` Sass mixin.
+
+This change was made in [pull request #3819: Add linked image focus style](https://github.com/alphagov/govuk-frontend/pull/3819).
+
 ### Breaking changes
 
 You must make the following changes when you migrate to this release, or your service might break.

packages/govuk-frontend/src/govuk/core/_links.scss

@@ -32,4 +32,10 @@
   .govuk-link--no-visited-state {
     @include govuk-link-style-no-visited-state;
   }
+
+  // Links that only contain images
+
+  .govuk-link-image {
+    @include govuk-link-image;
+  }
 }

packages/govuk-frontend/src/govuk/helpers/_focused.scss

@@ -26,3 +26,19 @@
   // box-shadow is applied to each fragment independently.
   box-decoration-break: clone;
 }
+
+/// Focused box
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Unlike govuk-focused-text, which only draws an underline below the element,
+/// govuk-focused-box draws an outline around all sides of the element.
+/// Best used for non-text content contained within links.
+///
+/// @access public
+
+@mixin govuk-focused-box {
+  outline: $govuk-focus-width solid transparent;
+  box-shadow:
+    0 0 0 4px $govuk-focus-colour,
+    0 0 0 8px $govuk-focus-text-colour;
+}

packages/govuk-frontend/src/govuk/helpers/_links.scss

@@ -362,3 +362,25 @@
     }
   }
 }
+
+/// Image link styles
+///
+/// Prepares and provides the focus state for links that only contain images
+/// with no accompanying text.
+///
+/// @access public
+
+@mixin govuk-link-image {
+  // Needed to draw the focus around the entire image
+  display: inline-block;
+
+  // Remove extra space at the bottom of the image that's added by line-height
+  line-height: 0;
+
+  // Don't render an underline
+  text-decoration: none;
+
+  &:focus {
+    @include govuk-focused-box;
+  }
+}