From b0ee653be3e1b640197749716a65761867dbd4e7 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:18:17 +0100
Subject: [PATCH 1/9] Update new focus mixin based on proposal

We've renamed the focus mixin since it's now only used,
with the `:focus` selector rather than having it baked in.

https://gist.github.com/nickcolley/791d084ff263786acb433ed0bd13c381
---
 src/components/accordion/_accordion.scss      |  2 +-
 src/components/details/_details.scss          |  4 +++-
 .../error-summary/_error-summary.scss         |  5 +----
 src/components/footer/_footer.scss            |  4 +++-
 src/components/header/_header.scss            | 12 +++++------
 src/helpers/_focusable.scss                   | 20 ++++++-------------
 src/helpers/_links.scss                       |  5 ++++-
 7 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 0bec54b539..ddc39a0011 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -202,7 +202,7 @@
     // We also want to avoid styling when the secttion is pressed or `:active`
     // to avoid the different focus styles from flashing quickly while the user interacts with the section.
     .govuk-accordion__section:not(.govuk-accordion__section--expanded) .govuk-accordion__section-button:focus:not(:active) {
-      @include govuk-focusable-text;
+      @include govuk-focused-text;
     }
 
     .govuk-accordion__controls {
diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
index 224bce7c6f..eced90e2b1 100644
--- a/src/components/details/_details.scss
+++ b/src/components/details/_details.scss
@@ -32,7 +32,9 @@
       color: $govuk-link-hover-colour;
     }
 
-    @include govuk-focusable-text-link;
+    &:focus {
+      @include govuk-focused-text;
+    }
   }
 
   // ...but only underline the text, not the arrow
diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss
index e2faf59bb7..3fb7531167 100644
--- a/src/components/error-summary/_error-summary.scss
+++ b/src/components/error-summary/_error-summary.scss
@@ -38,7 +38,6 @@
   }
 
   .govuk-error-summary__list a {
-    @include govuk-focusable-text-link;
     @include govuk-typography-weight-bold;
 
     // Override default link styling to use error colour
@@ -49,10 +48,8 @@
       color: $govuk-error-colour;
     }
 
-    // When focussed, the text colour needs to be darker to ensure that colour
-    // contrast is still acceptable
     &:focus {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
   }
 
diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss
index 4b4a7a1e05..875aaf518f 100644
--- a/src/components/footer/_footer.scss
+++ b/src/components/footer/_footer.scss
@@ -63,7 +63,9 @@
       }
     }
 
-    @include govuk-focusable-text-link;
+    &:focus {
+      @include govuk-focused-text;
+    }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
     // designed to make unvisited links a slightly darker blue when focussed, so
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
index d6c85b9b65..ac3c30c952 100644
--- a/src/components/header/_header.scss
+++ b/src/components/header/_header.scss
@@ -76,12 +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 {
-      color: $govuk-focus-text-colour;
+      @include govuk-focused-text;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -170,14 +166,16 @@
       text-decoration: underline;
     }
 
+    &:focus {
+      @include govuk-focused-text;
+    }
+
     &::after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
     }
 
-    @include govuk-focusable-text-link;
-
     @include mq ($from: tablet) {
       top: govuk-spacing(3);
     }
diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss
index 16f3b9345c..66c876c83f 100644
--- a/src/helpers/_focusable.scss
+++ b/src/helpers/_focusable.scss
@@ -33,7 +33,12 @@
   }
 }
 
-@mixin govuk-focusable-text {
+/// Focused text
+///
+/// Provides an outline to clearly indicate when the target element is focused.
+/// Used for interactive text-based elements.
+
+@mixin govuk-focused-text {
   // 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.
@@ -55,16 +60,3 @@
   // box shadow adds the "underline"
   text-decoration: none;
 }
-
-/// 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 {
-    @include govuk-focusable-text;
-  }
-}
diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss
index a4d1d85caa..36668d29c4 100644
--- a/src/helpers/_links.scss
+++ b/src/helpers/_links.scss
@@ -10,7 +10,10 @@
 
 @mixin govuk-link-common {
   @include govuk-typography-common;
-  @include govuk-focusable-text-link;
+
+  &:focus {
+    @include govuk-focused-text;
+  }
 }
 
 /// Default link style mixin

From 9ac6c484257f7f06fcebcb168403de00d0749655 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:21:52 +0100
Subject: [PATCH 2/9] Remove reliance on govuk-focusable-fill mixin for
 skip-link

This is going to be removed so inline the needed CSS declarations.
---
 src/components/skip-link/_skip-link.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss
index 3146effcac..8ceeda1399 100644
--- a/src/components/skip-link/_skip-link.scss
+++ b/src/components/skip-link/_skip-link.scss
@@ -6,7 +6,6 @@
   .govuk-skip-link {
     @include govuk-visually-hidden-focusable;
     @include govuk-typography-common;
-    @include govuk-focusable-fill;
     @include govuk-link-style-text;
     @include govuk-typography-responsive($size: 16);
 
@@ -23,5 +22,11 @@
       padding-right: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-right})");
       padding-left: unquote("max(#{govuk-spacing(3)}, #{$padding-safe-area-left})");
     }
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
+      background-color: $govuk-focus-colour;
+    }
   }
 }

From 692b238bd276966060ba8474b0238cfabb254788 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:22:15 +0100
Subject: [PATCH 3/9] Remove the govuk-focusable-fill mixin

For many use cases this can replaced with

`&:focus { @include govuk-focused-text; }`
---
 src/helpers/_focusable.scss | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss
index 66c876c83f..d9df9260d2 100644
--- a/src/helpers/_focusable.scss
+++ b/src/helpers/_focusable.scss
@@ -17,22 +17,6 @@
   }
 }
 
-/// Focusable with fill helper
-///
-/// Provides an additional outline and background colour to clearly indicate when
-/// the target element is focussed. Used for interactive text-based elements such
-/// as links.
-///
-/// @access public
-
-@mixin govuk-focusable-fill {
-  &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
-    background-color: $govuk-focus-colour;
-  }
-}
-
 /// Focused text
 ///
 /// Provides an outline to clearly indicate when the target element is focused.

From 863482d548366f665b7ffad6d91a3ba4c2e396f8 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:25:04 +0100
Subject: [PATCH 4/9] Remove use of govuk-focusable mixin from components

We are removing this mixin as it's no longer useful.

Many of the focus states now include edge cases or logic that'd require more focused mixins or parameters passed to the current mixins.

We're removing this mixin but may introduce more explicit mixins in the future for things like inputs.
---
 src/components/error-summary/_error-summary.scss | 6 +++++-
 src/components/file-upload/_file-upload.scss     | 5 +++--
 src/components/input/_input.scss                 | 3 ++-
 src/components/select/_select.scss               | 3 ++-
 src/components/textarea/_textarea.scss           | 4 +++-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss
index 3fb7531167..c938cc3167 100644
--- a/src/components/error-summary/_error-summary.scss
+++ b/src/components/error-summary/_error-summary.scss
@@ -10,9 +10,13 @@
     @include govuk-text-colour;
     @include govuk-responsive-padding(4);
     @include govuk-responsive-margin(8, "bottom");
-    @include govuk-focusable;
 
     border: $govuk-border-width solid $govuk-error-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
+    }
   }
 
   .govuk-error-summary__title {
diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss
index a3b3d419ae..cbf2fa0f03 100644
--- a/src/components/file-upload/_file-upload.scss
+++ b/src/components/file-upload/_file-upload.scss
@@ -12,7 +12,6 @@
   .govuk-file-upload {
     @include govuk-font($size: 19);
     @include govuk-text-colour;
-    @include govuk-focusable;
     padding-top: $component-padding;
     padding-bottom: $component-padding;
 
@@ -23,6 +22,9 @@
       margin-left: -$component-padding;
       padding-right: $component-padding;
       padding-left: $component-padding;
+
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
       // yellow focus state.
@@ -45,7 +47,6 @@
       padding-right: $component-padding;
       padding-left: $component-padding;
 
-      // Emulate `govuk-focusable` mixin styles for this component in FF
       outline: $govuk-focus-width solid $govuk-focus-colour;
       outline-offset: 0;
 
diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss
index fed27b00df..2a7bb90437 100644
--- a/src/components/input/_input.scss
+++ b/src/components/input/_input.scss
@@ -9,7 +9,6 @@
 @include govuk-exports("govuk/component/input") {
   .govuk-input {
     @include govuk-font($size: 19);
-    @include govuk-focusable;
 
     box-sizing: border-box;
     width: 100%;
@@ -26,6 +25,8 @@
     appearance: none;
 
     &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
       // it will change the element size. Also, `outline` cannot be utilised
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
index fcaa634b2b..f1f3d9b90c 100644
--- a/src/components/select/_select.scss
+++ b/src/components/select/_select.scss
@@ -9,7 +9,6 @@
 @include govuk-exports("govuk/component/select") {
   .govuk-select {
     @include govuk-font($size: 19, $line-height: 1.25);
-    @include govuk-focusable;
 
     box-sizing: border-box; // should this be global?
     max-width: 100%;
@@ -18,6 +17,8 @@
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
     &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
       // since `outline` is already used for the yellow focus state.
diff --git a/src/components/textarea/_textarea.scss b/src/components/textarea/_textarea.scss
index 4214cfcbd1..97a6880318 100644
--- a/src/components/textarea/_textarea.scss
+++ b/src/components/textarea/_textarea.scss
@@ -9,7 +9,6 @@
 @include govuk-exports("govuk/component/textarea") {
   .govuk-textarea {
     @include govuk-font($size: 19, $line-height: 1.25);
-    @include govuk-focusable;
 
     box-sizing: border-box; // should this be global?
     display: block;
@@ -26,6 +25,9 @@
     -webkit-appearance: none;
 
     &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+      outline-offset: 0;
+
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
       // since `outline` is already used for the yellow focus state.

From c3373b2514eb8857f17fc84284ed3b491def9f7f Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:26:22 +0100
Subject: [PATCH 5/9] Remove govuk-focusable mixin

We are removing this mixin as it's no longer useful.

Many of the focus states now include edge cases or logic that'd require more focused mixins or parameters passed to the current mixins.

We're removing this mixin but may introduce more explicit mixins in the future for things like inputs.
---
 src/helpers/_focusable.scss | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss
index d9df9260d2..fa71fe1661 100644
--- a/src/helpers/_focusable.scss
+++ b/src/helpers/_focusable.scss
@@ -2,21 +2,6 @@
 /// @group helpers
 ////
 
-/// Focusable helper
-///
-/// Provides an additional outline to clearly indicate when the target element is
-/// focussed. Used for interactive elements which themselves have some background
-/// or border, such as most form elements.
-///
-/// @access public
-
-@mixin govuk-focusable {
-  &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
-  }
-}
-
 /// Focused text
 ///
 /// Provides an outline to clearly indicate when the target element is focused.

From 35669fcc97c43dc3b1e04384047f110a83011192 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:27:45 +0100
Subject: [PATCH 6/9] Rename focusable file to focused

This is consistent with the mixin name changes
---
 src/helpers/_all.scss                          | 2 +-
 src/helpers/{_focusable.scss => _focused.scss} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/helpers/{_focusable.scss => _focused.scss} (100%)

diff --git a/src/helpers/_all.scss b/src/helpers/_all.scss
index 4eb1c0c34e..b3b280a625 100644
--- a/src/helpers/_all.scss
+++ b/src/helpers/_all.scss
@@ -1,7 +1,7 @@
 @import "clearfix";
 @import "colour";
 @import "device-pixels";
-@import "focusable";
+@import "focused";
 @import "font-faces";
 @import "grid";
 @import "links";
diff --git a/src/helpers/_focusable.scss b/src/helpers/_focused.scss
similarity index 100%
rename from src/helpers/_focusable.scss
rename to src/helpers/_focused.scss

From be8f9d2c178ad1ad05874504f1d715ed79198156 Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 14:45:47 +0100
Subject: [PATCH 7/9] Add CHANGELOG entry

---
 CHANGELOG.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94c9a828da..0f954ffd96 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,29 @@
 
 💥 Breaking changes:
 
+- Remove `govuk-focusable`, `govuk-focusable-fill` mixins, introduce `govuk-focus-text` mixin.
+
+  To migrate:
+
+  For many use cases where `govuk-focusable-fill` was used you can now use `govuk-focused-text`.
+
+  Before
+  ```scss
+  @include govuk-focusable-fill;
+  ```
+
+  After
+  ```scss
+  &:focus {
+    @include govuk-focused-text;
+  }
+  ```
+
+  For the `govuk-focusable` mixin, there is no general purpose mixin to replace this,
+  please read the new [TODO focus how to guide on the Design System website](#[TODO]).
+
+  ([PR #1361](https://github.com/alphagov/govuk-frontend/pull/1361))
+
 - Update positioning on table headers and cells to help improve readability
 
   To migrate: If you rely on a centered certain vertical alignment, you could add

From 127eddfff4a08d828cac094b0b6b0d7913394c5b Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Mon, 20 May 2019 15:01:49 +0100
Subject: [PATCH 8/9] Simplify outline-offset usage

We don't need to set this to zero everywhere, only on some inputs.

https://github.com/alphagov/govuk_elements/pull/346
---
 src/components/accordion/_accordion.scss         | 1 -
 src/components/button/_button.scss               | 1 -
 src/components/error-summary/_error-summary.scss | 1 -
 src/components/file-upload/_file-upload.scss     | 2 --
 src/components/input/_input.scss                 | 1 +
 src/components/select/_select.scss               | 1 +
 src/components/skip-link/_skip-link.scss         | 1 -
 src/components/textarea/_textarea.scss           | 2 +-
 src/helpers/_focused.scss                        | 1 -
 9 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index ddc39a0011..556a38db9f 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -132,7 +132,6 @@
       // backgrounds and box-shadows disappear, so we need to ensure there's a
       // transparent outline which will be set to a visible colour.
       outline: $govuk-focus-width solid transparent;
-      outline-offset: 0;
       color: $govuk-text-colour;
       // sass-lint:disable indentation
       box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour,
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 77e5618215..9ec80de60b 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -89,7 +89,6 @@
       // 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;
       }
       // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
       @include govuk-if-ie8 {
diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss
index c938cc3167..f7379a210e 100644
--- a/src/components/error-summary/_error-summary.scss
+++ b/src/components/error-summary/_error-summary.scss
@@ -15,7 +15,6 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
     }
   }
 
diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss
index cbf2fa0f03..225dc474bf 100644
--- a/src/components/file-upload/_file-upload.scss
+++ b/src/components/file-upload/_file-upload.scss
@@ -24,7 +24,6 @@
       padding-left: $component-padding;
 
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
       // Use `box-shadow` to add border instead of changing `border-width`
       // (which changes element size) and since `outline` is already used for the
       // yellow focus state.
@@ -48,7 +47,6 @@
       padding-left: $component-padding;
 
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
 
       box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
     }
diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss
index 2a7bb90437..d50f0c5fb8 100644
--- a/src/components/input/_input.scss
+++ b/src/components/input/_input.scss
@@ -26,6 +26,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
       // components such as textarea where we avoid changing `border-width` as
diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss
index f1f3d9b90c..5917308322 100644
--- a/src/components/select/_select.scss
+++ b/src/components/select/_select.scss
@@ -18,6 +18,7 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
       outline-offset: 0;
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss
index 8ceeda1399..cec49f1a8b 100644
--- a/src/components/skip-link/_skip-link.scss
+++ b/src/components/skip-link/_skip-link.scss
@@ -25,7 +25,6 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
-      outline-offset: 0;
       background-color: $govuk-focus-colour;
     }
   }
diff --git a/src/components/textarea/_textarea.scss b/src/components/textarea/_textarea.scss
index 97a6880318..2bda1bf380 100644
--- a/src/components/textarea/_textarea.scss
+++ b/src/components/textarea/_textarea.scss
@@ -26,8 +26,8 @@
 
     &:focus {
       outline: $govuk-focus-width solid $govuk-focus-colour;
+      // Ensure outline appears outside of the element
       outline-offset: 0;
-
       // Double the border by adding its width again. Use `box-shadow` to do
       // this instead of changing `border-width` (which changes element size) and
       // since `outline` is already used for the yellow focus state.
diff --git a/src/helpers/_focused.scss b/src/helpers/_focused.scss
index fa71fe1661..1b340e0a1a 100644
--- a/src/helpers/_focused.scss
+++ b/src/helpers/_focused.scss
@@ -15,7 +15,6 @@
   // 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-focus-text-colour;
   background-color: $govuk-focus-colour;

From b1b9e608d24f38807d782255f7448122c534672b Mon Sep 17 00:00:00 2001
From: Nick Colley <nick.colley@digital.cabinet-office.gov.uk>
Date: Wed, 22 May 2019 15:59:57 +0100
Subject: [PATCH 9/9] Set new mixin to be a public mixin

---
 src/helpers/_focused.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/helpers/_focused.scss b/src/helpers/_focused.scss
index 1b340e0a1a..802c4499d0 100644
--- a/src/helpers/_focused.scss
+++ b/src/helpers/_focused.scss
@@ -6,6 +6,8 @@
 ///
 /// Provides an outline to clearly indicate when the target element is focused.
 /// Used for interactive text-based elements.
+///
+/// @access public
 
 @mixin govuk-focused-text {
   // When colours are overridden, for example when users have a dark mode,