Add new focus style to buttons

CHANGELOG.md

@@ -34,6 +34,12 @@
 
   ([PR #1309](https://github.com/alphagov/govuk-frontend/pull/1309))
 
+- Update buttons to use new focus style
+
+  To migrate: [TODO add migration instructions before we ship v3.0.0]
+
+  ([PR #1315](https://github.com/alphagov/govuk-frontend/pull/1315))
+
 - Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow`
 
   To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`.

src/components/button/_button.scss

@@ -27,7 +27,6 @@
 
   .govuk-button {
     @include govuk-font($size: 19, $line-height: 19px);
-    @include govuk-focusable;
 
     box-sizing: border-box;
     display: inline-block;
@@ -63,37 +62,50 @@
       text-decoration: none;
     }
 
-    // alphagov/govuk_template includes a specific a:link:focus selector
-    // designed to make unvisited links a slightly darker blue when focussed, so
-    // we need to override the text colour for that combination of selectors so
-    // so that unvisited links styled as buttons do not end up with dark blue
-    // text when focussed.
-    @include govuk-compatibility(govuk_template) {
-      &:link:focus {
-        color: $govuk-button-text-colour;
-      }
-    }
-
     // Fix unwanted button padding in Firefox
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-button-hover-colour;
     }
 
     &:active {
+      // Bump the button down so it looks like its being pressed in
       top: $button-shadow-size;
-      box-shadow: none;
 
       @include govuk-if-ie8 {
         border-bottom-width: 0;
       }
     }
 
+    &: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;
+    }
+
     // The following adjustments do not work for <input type="button"> as
     // non-container elements cannot include pseudo elements (i.e. ::before).
 
@@ -175,8 +187,7 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-secondary-button-hover-colour;
     }
   }
@@ -204,8 +215,7 @@
       }
     }
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: $govuk-warning-button-hover-colour;
     }
   }

tasks/gulp/compile-assets.js

@@ -19,7 +19,7 @@ const cssnano = require('cssnano')
 const postcsspseudoclasses = require('postcss-pseudo-classes')({
   // Work around a bug in pseudo classes plugin that badly transforms
   // :not(:whatever) pseudo selectors
-  blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)']
+  blacklist: [':not(', ':disabled)', ':last-child)', ':focus)', ':active)', ':hover)']
 })
 
 // Compile CSS and JS task --------------