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