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

Add linked image focus style

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;
+  }
 }

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;
+}

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;
+  }
+}