From 0c9229bfad09266546815cd5717fc4c4fb45f219 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 10 Sep 2020 16:51:09 +0100
Subject: [PATCH 01/17] Update links, and things that look like links

Updates, and hacks, based on the changes in:

https://github.com/alphagov/govuk-frontend/pull/1309/files
---
 .../stylesheets/govuk-frontend/_all.scss      | 35 ++++++++----
 .../govuk-frontend/focus/components.scss      | 56 +++++++++++++++++++
 .../govuk-frontend/focus/helpers.scss         | 39 +++++++++++++
 .../govuk-frontend/focus/settings.scss        | 11 ++++
 4 files changed, 129 insertions(+), 12 deletions(-)
 create mode 100644 app/assets/stylesheets/govuk-frontend/focus/components.scss
 create mode 100644 app/assets/stylesheets/govuk-frontend/focus/helpers.scss
 create mode 100644 app/assets/stylesheets/govuk-frontend/focus/settings.scss

diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss
index 2a49596b4..8249d38f3 100644
--- a/app/assets/stylesheets/govuk-frontend/_all.scss
+++ b/app/assets/stylesheets/govuk-frontend/_all.scss
@@ -12,28 +12,39 @@ $govuk-compatibility-govukelements: true;
 $govuk-assets-path: "/static/";
 
 @import "settings/all";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/settings";
 @import "tools/all";
 @import "helpers/all";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/helpers";
 
 @import "core/all";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/core";
 @import "objects/all";
 
-// section replacing @import 'components/all', specifying which components to include
-@import 'components/skip-link/_skip-link';
-@import 'components/header/_header';
-@import 'components/footer/_footer';
-@import 'components/back-link/_back-link';
-@import 'components/button/_button';
-@import 'components/details/_details';
-@import 'components/radios/_radios';
-@import 'components/checkboxes/_checkboxes';
-@import 'components/input/_input';
+// section replacing @import "components/all", specifying which components to include
+@import "components/skip-link/_skip-link";
+@import "components/header/_header";
+@import "components/footer/_footer";
+@import "components/back-link/_back-link";
+@import "components/button/_button";
+@import "components/details/_details";
+@import "components/radios/_radios";
+@import "components/checkboxes/_checkboxes";
+@import "components/input/_input";
+
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/components";
 
 @import "utilities/all";
 @import "overrides/all";
 
 // Styles extending those from GOV.UK Frontend
-@import './extensions';
+@import "./extensions";
+// update to focus styles, remove when upgrading to GOVUK Frontend 3.x.x
+@import "./focus/extensions";
 
 // Styles for GOV.UK Frontend components specific to this application
-@import './overrides';
+@import "./overrides";
diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
new file mode 100644
index 000000000..c05b4f9fe
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -0,0 +1,56 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
+
+// Updates to skip-link component
+.govuk-skip-link {
+  @include govuk-typography-common;
+  @include govuk-focusable-fill;
+}
+
+// Updates to header component
+.govuk-header__link {
+  @include govuk-focusable-text-link;
+}
+
+.govuk-header__link--homepage {
+  // Remove any borders that show when focused and hovered.
+  &:focus {
+    border-bottom: 0;
+  }
+}
+
+// Updates to back-link component
+.govuk-back-link {
+  @include govuk-focusable-text-link;
+
+  // When the back link is focused, hide the bottom link border as the
+  // focus styles has a bottom border.
+  &:focus {
+    border-bottom-color: transparent;
+  }
+}
+
+// Updates to details component
+.govuk-details__summary {
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
+  @include govuk-focusable-text-link;
+}
+
+// Remove the underline when focussed to avoid duplicate borders
+.govuk-details__summary:focus .govuk-details__summary-text {
+  text-decoration: none;
+}
+
+.govuk-details__summary:before {
+  top: 0;
+}
diff --git a/app/assets/stylesheets/govuk-frontend/focus/helpers.scss b/app/assets/stylesheets/govuk-frontend/focus/helpers.scss
new file mode 100644
index 000000000..6e05b2996
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/focus/helpers.scss
@@ -0,0 +1,39 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
+
+/// Focusable with box-shadow
+///
+/// Removes the visible outline and replace with box-shadow and background colour.
+/// Used for interactive text-based elements.
+
+@mixin govuk-focusable-text-link {
+  &:focus {
+    // 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.
+
+    // 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-text-colour;
+    background-color: $govuk-focus-colour;
+    // sass-lint:disable indentation
+    box-shadow: -5px -1px 0 1px $govuk-focus-colour,
+                5px -1px 0 1px $govuk-focus-colour,
+                -3px 1px 0 3px $govuk-text-colour,
+                3px 1px 0 3px $govuk-text-colour;
+    // sass-lint:enable indentation
+    // When link is focussed, hide the default underline since the
+    // box shadow adds the "underline"
+    text-decoration: none;
+  }
+}
diff --git a/app/assets/stylesheets/govuk-frontend/focus/settings.scss b/app/assets/stylesheets/govuk-frontend/focus/settings.scss
new file mode 100644
index 000000000..4bc131707
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/focus/settings.scss
@@ -0,0 +1,11 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// The new 'yellow' colour was added in https://github.com/alphagov/govuk-frontend/pull/1288
+
+$govuk-focus-colour: #ffdd00; // assign new 'yellow' colour directly to limit impact of change

From 2b6d07d3587d5176534db3740c974f8ed5ade077 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 11 Sep 2020 19:21:32 +0100
Subject: [PATCH 02/17] Add new focus style to buttons

Updates based on the changes in:

https://github.com/alphagov/govuk-frontend/pull/1315
---
 .../govuk-frontend/focus/components.scss      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
index c05b4f9fe..969a3cd18 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/components.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -54,3 +54,31 @@
 .govuk-details__summary:before {
   top: 0;
 }
+
+// Updates to buttons
+.govuk-button {
+  &:focus {
+    border-color: $govuk-focus-colour;
+    // 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.
+    // 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 {
+      color: $govuk-text-colour;
+      background-color: $govuk-focus-colour;
+    }
+    box-shadow: inset 0 0 0 1px $govuk-focus-colour;
+  }
+
+  &:focus:not(:active):not(:hover) {
+    border-color: $govuk-focus-colour;
+    color: $govuk-text-colour;
+    background-color: $govuk-focus-colour;
+    box-shadow: 0 2px 0 $govuk-focus-text-colour;
+  }
+}

From 816ac484d93f37389575ea19555dac40213d55ec Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 11 Sep 2020 19:27:23 +0100
Subject: [PATCH 03/17] Update footer links to new focus style

Updates based on the changes in:

https://github.com/alphagov/govuk-frontend/pull/1321
---
 .../stylesheets/govuk-frontend/focus/components.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
index 969a3cd18..cd52c86c4 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/components.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -26,6 +26,18 @@
   }
 }
 
+// Updates to footer component
+.govuk-footer__link {
+  text-decoration: none;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+
+  @include govuk-focusable-text-link;
+}
+
 // Updates to back-link component
 .govuk-back-link {
   @include govuk-focusable-text-link;

From 11901481685ea5aadea834b5e162ece582394680 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 11 Sep 2020 21:29:30 +0100
Subject: [PATCH 04/17] Update form inputs to new focus style

---
 .../govuk-frontend/focus/components.scss      | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
index cd52c86c4..41819c85a 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/components.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -94,3 +94,106 @@
     box-shadow: 0 2px 0 $govuk-focus-text-colour;
   }
 }
+
+// Updates to form inputs
+.govuk-input {
+  &: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;
+  }
+}
+.govuk-input--error {
+  &:focus {
+    border-color: $govuk-input-border-colour;
+    // Remove `box-shadow` inherited from `:focus` as `input--error`
+    // already has the thicker border.
+    box-shadow: none;
+  }
+}
+
+// Updates to form textareas (hacked to work with GOVUK Elements version)
+.form-control {
+  @include govuk-focusable;
+
+  &: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;
+  }
+}
+.form-control-error {
+  &:focus {
+    border-color: $govuk-input-border-colour;
+    // Remove `box-shadow` inherited from `:focus` as `input--error`
+    // already has the thicker border.
+    box-shadow: none;
+  }
+}
+
+// Updates to form radios (hacked to work with GOVUK Elements version)
+
+$govuk-radios-size: 40px;
+// When the default focus width is used on a curved edge it looks visually smaller.
+// So for the circular radios we bump the default to make it look visually consistent.
+$govuk-radios-focus-width: $govuk-focus-width + 1px;
+
+// ( ) Radio ring
+.multiple-choice [type=radio] + label::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: $govuk-radios-size;
+  height: $govuk-radios-size;
+
+  border: $govuk-border-width-form-element solid currentColor;
+  border-radius: 50%;
+  background: transparent;
+}
+
+//  •  Radio button
+//
+// We create the 'button' entirely out of 'border' so that they remain
+// 'filled' even when colours are overridden in the browser.
+.multiple-choice [type=radio] + label::after {
+  content: "";
+
+  position: absolute;
+  top: govuk-spacing(2);
+  left: govuk-spacing(2);
+
+  width: 0;
+  height: 0;
+
+  border: govuk-spacing(2) solid currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  background: currentColor;
+}
+
+// Focused state
+.multiple-choice [type=radio]:focus + label::before {
+  border-width: 4px;
+  // Since box-shadows are removed when users customise their colours we set a
+  // transparent outline that is shown instead.
+  // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+  outline: $govuk-focus-width solid transparent;
+  outline-offset: $govuk-focus-width;
+  box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
+}
+
+// Selected state
+.multiple-choice [type=radio]:checked + label::after {
+  opacity: 1;
+}
+
+// Updates to form checkboxes
+.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+  border-width: 4px;
+}

From c1a6a38f6884fbc7c694588566eb5f364bfd82c7 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Sun, 13 Sep 2020 22:03:55 +0100
Subject: [PATCH 05/17] Set core focus styles for links

- add new focus style to `govuk-link` class
- do the same for `govuk-link--destructive` class
---
 .../stylesheets/govuk-frontend/focus/core.scss     | 14 ++++++++++++++
 .../govuk-frontend/focus/extensions.scss           | 14 ++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 app/assets/stylesheets/govuk-frontend/focus/core.scss
 create mode 100644 app/assets/stylesheets/govuk-frontend/focus/extensions.scss

diff --git a/app/assets/stylesheets/govuk-frontend/focus/core.scss b/app/assets/stylesheets/govuk-frontend/focus/core.scss
new file mode 100644
index 000000000..7e7290bea
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/focus/core.scss
@@ -0,0 +1,14 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
+
+// Hack to fix not being able to override the govuk-link-common mixin
+.govuk-link {
+  @include govuk-focusable-text-link;
+}
diff --git a/app/assets/stylesheets/govuk-frontend/focus/extensions.scss b/app/assets/stylesheets/govuk-frontend/focus/extensions.scss
new file mode 100644
index 000000000..dc0ef347c
--- /dev/null
+++ b/app/assets/stylesheets/govuk-frontend/focus/extensions.scss
@@ -0,0 +1,14 @@
+// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
+// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
+//
+// See the following for details of the update:
+// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
+// - https://design-system.service.gov.uk/get-started/focus-states/
+// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
+//
+// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
+// (for the error summary component, which we don't use yet)
+
+.govuk-link--destructive:focus {
+  @include govuk-focusable-text-link;
+}

From 2f4fddfeffca02778d35855a6b8d957762f211c5 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 20:51:11 +0100
Subject: [PATCH 06/17] Update focus styles helper to latest version

---
 .../govuk-frontend/focus/helpers.scss          | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/govuk-frontend/focus/helpers.scss b/app/assets/stylesheets/govuk-frontend/focus/helpers.scss
index 6e05b2996..d3b9e61ff 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/helpers.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/helpers.scss
@@ -7,7 +7,8 @@
 // - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
 //
 // These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
-
+// and edited in https://github.com/alphagov/govuk-frontend/pull/1455
+//
 /// Focusable with box-shadow
 ///
 /// Removes the visible outline and replace with box-shadow and background colour.
@@ -19,19 +20,10 @@
     // backgrounds and box-shadows disappear, so we need to ensure there's a
     // transparent outline which will be set to a visible colour.
 
-    // 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-text-colour;
+    outline: $govuk-focus-width solid transparent;
+    color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    // sass-lint:disable indentation
-    box-shadow: -5px -1px 0 1px $govuk-focus-colour,
-                5px -1px 0 1px $govuk-focus-colour,
-                -3px 1px 0 3px $govuk-text-colour,
-                3px 1px 0 3px $govuk-text-colour;
-    // sass-lint:enable indentation
+    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
     // When link is focussed, hide the default underline since the
     // box shadow adds the "underline"
     text-decoration: none;

From 1a086c0631351f1ac821af4098b6e39bf217c3a7 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 21:12:46 +0100
Subject: [PATCH 07/17] Fix focus style on prev/next links

It has a hover colour so needs the focus colour
re-defined.

The `overflow: hidden` was clipping the black
underline of the focus style on the prev/next
links. This assumes it was only there to contain
the 2 floating links so replaces it with a
clearfix, which does the same without clipping the
underline.
---
 .../components/vendor/previous-next-navigation.scss      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
index 940542a4e..502439270 100644
--- a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
+++ b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
@@ -34,7 +34,7 @@ $is-ie: false !default;
   margin-bottom: govuk-spacing(6);
   margin-left: -1 * govuk-spacing(3);
   margin-right: -1 * govuk-spacing(3);
-  overflow: hidden;
+  @include govuk-clearfix;
 
   ul {
     margin: 0;
@@ -55,11 +55,14 @@ $is-ie: false !default;
       padding: govuk-spacing(3);
       text-decoration: none;
 
-      &:hover,
-      &:active {
+      &:hover {
         background-color: $canvas-colour;
       }
 
+      &:focus {
+        background-color: $govuk-focus-colour;
+      }
+
       .pagination-part-title {
         @include core-27($line-height: (33.75 / 27));
         display: block;

From ec67bb28195678f820635e9f9f67c3e953c227ec Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 22:06:18 +0100
Subject: [PATCH 08/17] Fix focus styles for table links

---
 app/assets/stylesheets/components/table.scss | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index 86aff3824..79449aa3f 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/app/assets/stylesheets/components/table.scss
@@ -337,6 +337,11 @@
     display: block;
     position: relative;
 
+    /* remove default focus styles in favour of those for :before pseudo class */
+    &:focus {
+      box-shadow: none;
+    }
+
     &:before {
       content: "";
       display: block;
@@ -353,10 +358,7 @@
 
     &:active:before,
     &:focus:before {
-      border-color: $yellow;
-      border-style: solid;
-      border-width: 15px 3px 15px 15px;
-      right: -3px;
+      box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 15px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -11px $govuk-focus-colour;
     }
 
   }

From 322dab8415db3410ba57e2a9f1b63df74e35b2e5 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 22:24:23 +0100
Subject: [PATCH 09/17] Fix focus style on 'show more' links

---
 app/assets/stylesheets/components/show-more.scss | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/components/show-more.scss b/app/assets/stylesheets/components/show-more.scss
index 3cba1623a..c5d083fcb 100644
--- a/app/assets/stylesheets/components/show-more.scss
+++ b/app/assets/stylesheets/components/show-more.scss
@@ -10,15 +10,14 @@
 
   &:focus {
 
-    outline: none;
-    color: $text-colour;
-    box-shadow: 0 -10px 0 0 $yellow;
-    border-color: $yellow;
+    border-color: transparent;
+    /* override default focus style to increase top yellow box-shadow */
+    box-shadow: 0 -15px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
 
     span {
-      background: $yellow;
       outline: none;
-      border-color: $text-colour;
+      border-color: transparent;
+      background-color: transparent;
     }
 
   }

From 2f5ecdb1fa247c283bacd56589b7e5de3825e2b5 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 22:54:09 +0100
Subject: [PATCH 10/17] Fix org navigation links focus styles

---
 .../stylesheets/components/navigation.scss      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index c25e4d4ea..67c6395d1 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -73,11 +73,9 @@
       padding: $padding-top 0 $padding-bottom govuk-spacing(3);
 
       &:focus {
-        outline: none;
-        border-bottom: 1px solid $yellow;
-        border-left: 10px solid $yellow;
-        border-right: 3px solid $yellow;
-        right: -3px;
+        padding: $padding-top 0px $padding-bottom + 1px govuk-spacing(3) + 10;
+        /* override default focus style to inset bottom underline */
+        box-shadow: inset 0 -4px $govuk-focus-text-colour;
       }
 
     }
@@ -105,7 +103,7 @@
       position: absolute;
       top: -1px;
       bottom: 1px;
-      right: 7px;
+      right: 2px;
       width: 7px;
       height: 7px;
       margin: auto 0;
@@ -117,10 +115,13 @@
       border-color: $secondary-text-colour;
     }
 
+    &:focus:before {
+      border-color: $govuk-focus-text-colour;
+    }
+
     // hack to make the focus style fit in the navigation bar
     &:focus {
-      outline: none;
-      box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
+      box-shadow: inset 0 -3px $govuk-focus-text-colour, 0 1px $govuk-focus-text-colour;
     }
 
   }

From 9c55477512c56fc706cd02dd15d81dba053bbcf5 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 23:31:13 +0100
Subject: [PATCH 11/17] Fix focus style for pill links

Includes changes for:
- pills as page navigation
- pills as separate items
- big number links
---
 .../stylesheets/components/big-number.scss    | 18 ++++++++++--
 app/assets/stylesheets/components/pill.scss   | 28 +++++++++++++++++--
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index 45e006327..b8dabea7b 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -97,7 +97,10 @@
 
       color: $light-blue-25;
 
-      .big-number {
+      .big-number,
+      .big-number-number,
+      .big-number-smaller,
+      .big-number-label {
         color: $light-blue-25;
       }
 
@@ -105,7 +108,18 @@
 
     &:active,
     &:focus {
-      outline: 3px solid $yellow;
+      background: $govuk-focus-colour;
+      border: none;
+      padding: 2px; /* replace the spacing the border gave */
+      /* override the default focus style to inset the underline */
+      box-shadow: inset 0 -4px $govuk-focus-text-colour;
+
+      .big-number-number,
+      .big-number-smaller,
+      .big-number-label {
+        color: $govuk-focus-text-colour;
+        text-decoration: none;
+      }
     }
 
     .big-number,
diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 1f004f65c..e497852de 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -55,6 +55,11 @@
     &:active,
     &:focus {
       z-index: 10;
+      color: $govuk-focus-text-colour;
+      /* override default focus styles to inset bottom underline */
+      box-shadow: inset 0 -4px $govuk-focus-text-colour;
+      border: none;
+      padding: 12px 2px; /* compensate for lack of border with padding */
     }
   }
 
@@ -77,7 +82,10 @@
     &:active,
     &:focus {
       z-index: 1000;
-      outline: 3px solid $yellow;
+      color: $govuk-focus-text-colour;
+      border: solid 2px $black;
+      padding: 10px 0px; /* reset padding to default */
+      box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
     }
 
   }
@@ -94,6 +102,13 @@
 
   }
 
+  &-item,
+  &-item--selected {
+    &:focus .pill-item__label {
+      text-decoration: none;
+    }
+  }
+
   &-item--centered {
     text-align: center;
     padding-left: 0;
@@ -117,10 +132,17 @@
       text-decoration: underline;
     }
 
-    &:hover,
+    &:hover {
+      color: $light-blue-25;
+    }
+
     &:focus,
     &:link:focus {
-      color: $light-blue-25;
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+      background: $govuk-focus-colour;
+      /* override default focus style to inset bottom underline */
+      box-shadow: inset 0 -4px $govuk-focus-text-colour;
     }
 
   }

From efc09e68ea81b7610fe7b43ab49c43203b1175d0 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 23:48:55 +0100
Subject: [PATCH 12/17] Fix focus style for task list link

---
 app/assets/stylesheets/components/task-list.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/task-list.scss b/app/assets/stylesheets/components/task-list.scss
index 5fe309920..c5222d084 100644
--- a/app/assets/stylesheets/components/task-list.scss
+++ b/app/assets/stylesheets/components/task-list.scss
@@ -32,8 +32,7 @@ $indicator-colour: $black;
       position: relative;
 
       &:focus {
-        outline: none;
-        box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
+        box-shadow: inset 0 -4px $govuk-focus-text-colour;
         border-color: transparent;
         top: -1px;
         margin-bottom: -2px;

From 6ca5745ad5b1cd3923d171b86227a43c165e4d06 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 14 Sep 2020 23:54:04 +0100
Subject: [PATCH 13/17] Fix focus style for link on product page

---
 app/assets/stylesheets/views/product-page.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss
index a81b77c36..190ecf88b 100644
--- a/app/assets/stylesheets/views/product-page.scss
+++ b/app/assets/stylesheets/views/product-page.scss
@@ -47,11 +47,15 @@ $button-shadow-size: $govuk-border-width-form-element;
         color: $white;
       }
 
-      &:hover,
-      &:active {
+      &:hover {
         color: $light-blue-25;
       }
 
+      &:active,
+      &:focus {
+        color: $govuk-focus-text-colour;
+      }
+
     }
 
   }

From 32b2f617f10323c8670836174cb7d82ce5cb4e0c Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Sep 2020 11:01:32 +0100
Subject: [PATCH 14/17] Fix links to files in dashboard table

Includes fixes for the grey text they overlap,
when the adjacent link is focused.
---
 app/assets/stylesheets/views/dashboard.scss | 23 +++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index f694415d6..55de2bc0b 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -96,6 +96,29 @@
 
 }
 
+/* The focus state for sibling links overlaps the hint so the hint's text colour needs to adapt */
+.govuk-link:focus {
+  &.file-list-filename,
+  &.file-list-filename-large,
+  & + .file-list-hint,
+  & + .file-list-hint-large {
+    /* link needs non-static position to overlap the cell border, hint so it isn't overlapped itself */
+    position: relative;
+  }
+
+  &.file-list-filename,
+  &.file-list-filename-large {
+    /* override box-shadow to push underline down a bit */
+    box-shadow: 0 -2px $govuk-focus-colour, 0 5px $govuk-focus-text-colour;
+  }
+
+  & + .file-list-hint,
+  & + .file-list-hint-large {
+    color: $govuk-focus-text-colour;
+  }
+
+}
+
 .failure-highlight {
   @include bold-19;
   color: $error-colour;

From ebb84fcf08fbc1d13ae8288c4863e8690f282492 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Sep 2020 16:18:26 +0100
Subject: [PATCH 15/17] Fix focus styles for user-list-edit-link

---
 app/assets/stylesheets/views/users.scss | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss
index a30f04741..7dc8a6bf8 100644
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -53,6 +53,11 @@ $item-top-padding: govuk-spacing(3);
       margin: 0;
     }
 
+    &:focus {
+      /* cancel default focus styling in favour of that from :before pseudo class */
+      box-shadow: none;
+    }
+
     &:before {
       content: "";
       display: block;
@@ -69,14 +74,13 @@ $item-top-padding: govuk-spacing(3);
 
     &:active:before,
     &:focus:before {
-      border-color: $yellow;
-      border-style: solid;
-      border-width: 15px 3px;
+      box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 3px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
       right: -3px;
       left: -3px;
 
       @include govuk-media-query($from: tablet) {
         border-width: 15px 3px 15px 15px;
+        box-shadow: inset 0px -4px $govuk-focus-text-colour, inset 0px 16px $govuk-focus-colour, inset 15px 0px $govuk-focus-colour, inset 0px -15px $govuk-focus-colour, inset -3px 0px $govuk-focus-colour;
         left: -15px;
       }
     }

From b52501576548fd57e143651dcc2adb677311f683 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 16 Sep 2020 14:00:15 +0100
Subject: [PATCH 16/17] Bump styles for existing GOVUK Frontend radios

We have some radios using the GOVUK Frontend
radios component in this app. They are version
2.x.x though so this bumps their styles to version
3.x.x to get the new focus style.
---
 app/assets/stylesheets/govuk-frontend/focus/components.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss
index 41819c85a..722e77225 100644
--- a/app/assets/stylesheets/govuk-frontend/focus/components.scss
+++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss
@@ -177,8 +177,9 @@ $govuk-radios-focus-width: $govuk-focus-width + 1px;
   background: currentColor;
 }
 
-// Focused state
-.multiple-choice [type=radio]:focus + label::before {
+// Focused state (includes targeting for GOVUK radios, to apply version 3.x.x styles)
+.multiple-choice [type=radio]:focus + label::before,
+.govuk-radios__input:focus + .govuk-radios__label::before {
   border-width: 4px;
   // Since box-shadows are removed when users customise their colours we set a
   // transparent outline that is shown instead.

From 308f9980d3eff6ed60aadcdb2ee85a28a7434ba0 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 16 Sep 2020 14:43:48 +0100
Subject: [PATCH 17/17] Fixes for focus issues on /templates page(s)

Includes:
- fixes for the cancel button, when selecting a
  template type (after clicking 'New template')
- making the folder icon black, to match the text,
  on template list items
---
 app/assets/stylesheets/components/message.scss            | 4 ++++
 .../components/stick-at-top-when-scrolling.scss           | 8 +++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index d783f7d5b..07691834d 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -147,6 +147,10 @@ $message-type-bottom-spacing: govuk-spacing(4);
       background-image: file-url('folder-blue-bold-hover.svg');
     }
 
+    &:focus {
+      background-image: file-url('folder-black-bold.svg');
+    }
+
   }
 
   &-template {
diff --git a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
index 14afd4352..acadbbe16 100644
--- a/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
+++ b/app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
@@ -145,11 +145,9 @@ $sticky-padding: govuk-spacing(4);
     color: $link-hover-colour;
   }
 
-  &:focus,
-  &:active, {
-    background: $yellow;
-    color: $govuk-blue;
-    outline: none;
+  &:focus {
+    /* override default box shadow to stop it looking so large vertically */
+    box-shadow: inset 0 -4px $govuk-focus-text-colour;
   }
 
 }