[Spike] Option 3: Remove existing mixins, include new mixins for inputs, input errors and links, with no generic focus mixin.

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-focussed-fill;
     }
 
     .govuk-accordion__controls {

src/components/details/_details.scss

@@ -32,7 +32,9 @@
       color: $govuk-link-hover-colour;
     }
 
-    @include govuk-focusable-text-link;
+    &:focus {
+      @include govuk-focussed-fill;
+    }
   }
 
   // ...but only underline the text, not the arrow

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 {
@@ -38,7 +42,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 +52,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-focussed-fill;
     }
   }
 

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,15 +22,8 @@
       margin-left: -$component-padding;
       padding-right: $component-padding;
       padding-left: $component-padding;
-      // 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.
-      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
 
-      @include govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so add an actual border
-        border: 4px solid $govuk-input-border-colour;
-      }
+      @include govuk-focussed-input(4px);
     }
 
     // Set "focus-within" to fix https://bugzilla.mozilla.org/show_bug.cgi?id=1430196
@@ -45,11 +37,7 @@
       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;
-
-      box-shadow: inset 0 0 0 4px $govuk-input-border-colour;
+      @include govuk-focussed-input(4px);
     }
   }
 
@@ -63,10 +51,7 @@
     border: $govuk-border-width-form-element-error solid $govuk-error-colour;
 
     &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `file-upload--error`
-      // already has the thicker border.
-      box-shadow: none;
+      @include govuk-focussed-input-error;
     }
 
     // Repeat `:focus` styles to prevent error styles from being applied when
@@ -75,8 +60,7 @@
     // to recognise `focus-within` and don't set any styles from the block
     // when it's a selector.
     &:focus-within {
-      border-color: $govuk-input-border-colour;
-      box-shadow: none;
+      @include govuk-focussed-input-error;
     }
   }
 }

src/components/footer/_footer.scss

@@ -63,7 +63,9 @@
       }
     }
 
-    @include govuk-focusable-text-link;
+    &:focus {
+      @include govuk-focussed-fill;
+    }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
     // designed to make unvisited links a slightly darker blue when focussed, so

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-focussed-fill;
     }
 
     // alphagov/govuk_template includes a specific a:link:focus selector
@@ -170,14 +166,16 @@
       text-decoration: underline;
     }
 
+    &:focus {
+      @include govuk-focussed-fill;
+    }
+
     &::after {
       @include govuk-shape-arrow($direction: down, $base: 10px, $display: inline-block);
       content: "";
       margin-left: govuk-spacing(1);
     }
 
-    @include govuk-focusable;
-
     @include mq ($from: tablet) {
       top: govuk-spacing(3);
     }

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,17 +25,7 @@
     appearance: none;
 
     &:focus {
-      // 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
-      // here as it is already used for the yellow focus state.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-      @include govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so double the border with
-        // `border-width`.
-        border-width: $govuk-border-width-form-element * 2;
-      }
+      @include govuk-focussed-input;
     }
   }
 
@@ -54,10 +43,7 @@
     border: $govuk-border-width-form-element-error solid $govuk-error-colour;
 
     &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `input--error`
-      // already has the thicker border.
-      box-shadow: none;
+      @include govuk-focussed-input-error;
     }
   }
 

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,16 +17,7 @@
     border: $govuk-border-width-form-element solid $govuk-input-border-colour;
 
     &:focus {
-      // 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.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-      @include govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so double the border with
-        // `border-width`.
-        border-width: $govuk-border-width-form-element * 2;
-      }
+      @include govuk-focussed-input;
     }
   }
 
@@ -42,10 +32,7 @@
     border: $govuk-border-width-form-element-error solid $govuk-error-colour;
 
     &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `select--error`
-      // already has the thicker border.
-      box-shadow: none;
+      @include govuk-focussed-input-error;
     }
   }
 

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

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,27 +25,15 @@
     -webkit-appearance: none;
 
     &:focus {
-      // 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.
-      box-shadow: inset 0 0 0 $govuk-border-width-form-element;
-
-      @include govuk-if-ie8 {
-        // IE8 doesn't support `box-shadow` so double the border with
-        // `border-width`.
-        border-width: $govuk-border-width-form-element * 2;
-      }
+      @include govuk-focussed-input;
     }
   }
 
   .govuk-textarea--error {
     border: $govuk-border-width-form-element-error solid $govuk-error-colour;
 
     &:focus {
-      border-color: $govuk-input-border-colour;
-      // Remove `box-shadow` inherited from `:focus` as `textarea--error`
-      // already has the thicker border.
-      box-shadow: none;
+      @include govuk-focussed-input-error;
     }
 
   }

src/helpers/_focusable.scss

@@ -10,13 +10,24 @@
 ///
 /// @access public
 
-@mixin govuk-focusable {
-  &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
+@mixin govuk-focussed-input($border-width: $govuk-border-width-form-element) {
+  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 $border-width $govuk-text-colour;
+
+  @include govuk-if-ie8 {
+    // IE8 doesn't support `box-shadow` so add an actual border
+    border: $border-width solid $govuk-text-colour;
   }
 }
 
+@mixin govuk-focussed-input-error {
+  border-color: $govuk-input-border-colour;
+  // Remove `box-shadow` inherited from `:focus` as `textarea--error`
+  // already has the thicker border.
+  box-shadow: none;
+}
+
 /// Focusable with fill helper
 ///
 /// Provides an additional outline and background colour to clearly indicate when
@@ -25,15 +36,7 @@
 ///
 /// @access public
 
-@mixin govuk-focusable-fill {
-  &:focus {
-    outline: $govuk-focus-width solid $govuk-focus-colour;
-    outline-offset: 0;
-    background-color: $govuk-focus-colour;
-  }
-}
-
-@mixin govuk-focusable-text {
+@mixin govuk-focussed-fill {
   // 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 +58,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;
-  }
-}

src/helpers/_links.scss

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