From db284f530fbf7850769cdab61e35c5423cf7a8f8 Mon Sep 17 00:00:00 2001
From: "beeps (Kim Grey)" <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Fri, 23 Jun 2023 16:05:59 +0100
Subject: [PATCH] Add linked image focus style

---
 src/govuk/core/_links.scss      |  6 ++++++
 src/govuk/helpers/_focused.scss | 16 ++++++++++++++++
 src/govuk/helpers/_links.scss   | 22 ++++++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/src/govuk/core/_links.scss b/src/govuk/core/_links.scss
index 0cc378ad36..bd62d2ec14 100644
--- a/src/govuk/core/_links.scss
+++ b/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;
+  }
 }
diff --git a/src/govuk/helpers/_focused.scss b/src/govuk/helpers/_focused.scss
index 49a0434604..a94f8c469f 100644
--- a/src/govuk/helpers/_focused.scss
+++ b/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;
+}
diff --git a/src/govuk/helpers/_links.scss b/src/govuk/helpers/_links.scss
index cc7a999b7e..3ad9de0a57 100644
--- a/src/govuk/helpers/_links.scss
+++ b/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;
+  }
+}