Merge pull request #3628 from alphagov/update-focus-style-to-govuk-frontend-3-version

Update focus style to GOVUK Frontend 3 version

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,

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 {

app/assets/stylesheets/components/navigation.scss

@@ -73,11 +73,9 @@
       padding: $padding-top 0 $padding-bottom govuk-spacing(3);
 
       &:focus {
-        outline: none;
+        padding: $padding-top 0px $padding-bottom + 1px govuk-spacing(3) + 10;
-        border-bottom: 1px solid $yellow;
+        /* override default focus style to inset bottom underline */
-        border-left: 10px solid $yellow;
+        box-shadow: inset 0 -4px $govuk-focus-text-colour;
-        border-right: 3px solid $yellow;
-        right: -3px;
       }
 
     }
@@ -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: inset 0 -3px $govuk-focus-text-colour, 0 1px $govuk-focus-text-colour;
-      box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour;
     }
 
   }

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

app/assets/stylesheets/components/show-more.scss

@@ -10,15 +10,14 @@
 
   &:focus {
 
-    outline: none;
+    border-color: transparent;
-    color: $text-colour;
+    /* override default focus style to increase top yellow box-shadow */
-    box-shadow: 0 -10px 0 0 $yellow;
+    box-shadow: 0 -15px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
-    border-color: $yellow;
 
     span {
-      background: $yellow;
       outline: none;
-      border-color: $text-colour;
+      border-color: transparent;
+      background-color: transparent;
     }
 
   }

app/assets/stylesheets/components/stick-at-top-when-scrolling.scss

@@ -145,11 +145,9 @@ $sticky-padding: govuk-spacing(4);
     color: $link-hover-colour;
   }
 
-  &:focus,
+  &:focus {
-  &:active, {
+    /* override default box shadow to stop it looking so large vertically */
-    background: $yellow;
+    box-shadow: inset 0 -4px $govuk-focus-text-colour;
-    color: $govuk-blue;
-    outline: none;
   }
 
 }

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;
+      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;
-      border-style: solid;
-      border-width: 15px 3px 15px 15px;
-      right: -3px;
     }
 
   }

app/assets/stylesheets/components/task-list.scss

@@ -32,8 +32,7 @@ $indicator-colour: $black;
       position: relative;
 
       &:focus {
-        outline: none;
+        box-shadow: inset 0 -4px $govuk-focus-text-colour;
-        box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
         border-color: transparent;
         top: -1px;
         margin-bottom: -2px;

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,
+      &:hover {
-      &:active {
         background-color: $canvas-colour;
       }
 
+      &:focus {
+        background-color: $govuk-focus-colour;
+      }
+
       .pagination-part-title {
         @include core-27($line-height: (33.75 / 27));
         display: block;

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
+// section replacing @import "components/all", specifying which components to include
-@import 'components/skip-link/_skip-link';
+@import "components/skip-link/_skip-link";
-@import 'components/header/_header';
+@import "components/header/_header";
-@import 'components/footer/_footer';
+@import "components/footer/_footer";
-@import 'components/back-link/_back-link';
+@import "components/back-link/_back-link";
-@import 'components/button/_button';
+@import "components/button/_button";
-@import 'components/details/_details';
+@import "components/details/_details";
-@import 'components/radios/_radios';
+@import "components/radios/_radios";
-@import 'components/checkboxes/_checkboxes';
+@import "components/checkboxes/_checkboxes";
-@import 'components/input/_input';
+@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";

app/assets/stylesheets/govuk-frontend/focus/components.scss

@@ -0,0 +1,200 @@
+// 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 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;
+
+  // 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;
+}
+
+// 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;
+  }
+}
+
+// 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 (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.
+  // 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;
+}

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

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

app/assets/stylesheets/govuk-frontend/focus/helpers.scss

@@ -0,0 +1,31 @@
+// 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
+// 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.
+/// 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.
+
+    outline: $govuk-focus-width solid transparent;
+    color: $govuk-focus-text-colour;
+    background-color: $govuk-focus-colour;
+    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;
+  }
+}

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

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;

app/assets/stylesheets/views/product-page.scss

@@ -47,11 +47,15 @@ $button-shadow-size: $govuk-border-width-form-element;
         color: $white;
       }
 
-      &:hover,
+      &:hover {
-      &:active {
         color: $light-blue-25;
       }
 
+      &:active,
+      &:focus {
+        color: $govuk-focus-text-colour;
+      }
+
     }
 
   }

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;
+      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;
-      border-style: solid;
-      border-width: 15px 3px;
       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;
       }
     }