From 87246e6df9a4b39305ec1eedad7748011aa9cd32 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 16 May 2019 14:12:14 +0100 Subject: [PATCH] Remove focussable and foussable-fill mixins --- src/components/accordion/_accordion.scss | 4 +- src/components/button/_button.scss | 2 +- src/components/details/_details.scss | 4 +- .../error-summary/_error-summary.scss | 11 +++-- src/components/file-upload/_file-upload.scss | 5 +- src/components/footer/_footer.scss | 4 +- src/components/header/_header.scss | 10 ++-- src/components/input/_input.scss | 3 +- src/components/select/_select.scss | 3 +- src/components/skip-link/_skip-link.scss | 7 ++- src/components/textarea/_textarea.scss | 3 +- src/helpers/_focusable.scss | 48 +------------------ src/helpers/_links.scss | 5 +- src/settings/_measurements.scss | 2 + 14 files changed, 42 insertions(+), 69 deletions(-) diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss index 0bec54b539..30792c6d64 100644 --- a/src/components/accordion/_accordion.scss +++ b/src/components/accordion/_accordion.scss @@ -132,7 +132,7 @@ // 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; - outline-offset: 0; + outline-offset: $govuk-focus-offset; color: $govuk-text-colour; // sass-lint:disable indentation box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-focus-colour, @@ -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-focused-text; } .govuk-accordion__controls { diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index ade3eac132..a0849a9e87 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -89,7 +89,7 @@ // 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; + outline-offset: $govuk-focus-offset; } // Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines. @include govuk-if-ie8 { diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss index 224bce7c6f..eced90e2b1 100644 --- a/src/components/details/_details.scss +++ b/src/components/details/_details.scss @@ -32,7 +32,9 @@ color: $govuk-link-hover-colour; } - @include govuk-focusable-text-link; + &:focus { + @include govuk-focused-text; + } } // ...but only underline the text, not the arrow diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index e2faf59bb7..7270032115 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/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: $govuk-focus-offset; + } } .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-focused-text; } } diff --git a/src/components/file-upload/_file-upload.scss b/src/components/file-upload/_file-upload.scss index a3b3d419ae..36b34c7f8a 100644 --- a/src/components/file-upload/_file-upload.scss +++ b/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,6 +22,8 @@ margin-left: -$component-padding; padding-right: $component-padding; padding-left: $component-padding; + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: $govuk-focus-offset; // 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. @@ -47,7 +48,7 @@ // Emulate `govuk-focusable` mixin styles for this component in FF outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; + outline-offset: $govuk-focus-offset; box-shadow: inset 0 0 0 4px $govuk-input-border-colour; } diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index 4b4a7a1e05..875aaf518f 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -63,7 +63,9 @@ } } - @include govuk-focusable-text-link; + &:focus { + @include govuk-focused-text; + } // alphagov/govuk_template includes a specific a:link:focus selector // designed to make unvisited links a slightly darker blue when focussed, so diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index f51b200c43..50a67b0a0a 100644 --- a/src/components/header/_header.scss +++ b/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-focused-text; } // alphagov/govuk_template includes a specific a:link:focus selector @@ -176,7 +172,9 @@ margin-left: govuk-spacing(1); } - @include govuk-focusable; + &:focus { + @include govuk-focused-text; + } @include mq ($from: tablet) { top: govuk-spacing(3); diff --git a/src/components/input/_input.scss b/src/components/input/_input.scss index fed27b00df..313f01a311 100644 --- a/src/components/input/_input.scss +++ b/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,6 +25,8 @@ appearance: none; &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: $govuk-focus-offset; // 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 diff --git a/src/components/select/_select.scss b/src/components/select/_select.scss index fcaa634b2b..c555d7c69c 100644 --- a/src/components/select/_select.scss +++ b/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,6 +17,8 @@ border: $govuk-border-width-form-element solid $govuk-input-border-colour; &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: $govuk-focus-offset; // 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. diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss index 3146effcac..4e21d729ec 100644 --- a/src/components/skip-link/_skip-link.scss +++ b/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: $govuk-focus-offset; + background-color: $govuk-focus-colour; + } } } diff --git a/src/components/textarea/_textarea.scss b/src/components/textarea/_textarea.scss index 4214cfcbd1..e1d0b2f04c 100644 --- a/src/components/textarea/_textarea.scss +++ b/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,6 +25,8 @@ -webkit-appearance: none; &:focus { + outline: $govuk-focus-width solid $govuk-focus-colour; + outline-offset: $govuk-focus-offset; // 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. diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss index 68738f99cb..eb17e98b30 100644 --- a/src/helpers/_focusable.scss +++ b/src/helpers/_focusable.scss @@ -2,38 +2,7 @@ /// @group helpers //// -/// Focusable helper -/// -/// Provides an additional outline to clearly indicate when the target element is -/// focussed. Used for interactive elements which themselves have some background -/// or border, such as most form elements. -/// -/// @access public - -@mixin govuk-focusable { - &:focus { - outline: $govuk-focus-width solid $govuk-focus-colour; - outline-offset: 0; - } -} - -/// Focusable with fill helper -/// -/// Provides an additional outline and background colour to clearly indicate when -/// the target element is focussed. Used for interactive text-based elements such -/// as links. -/// -/// @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-focused-text { // 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. @@ -41,7 +10,7 @@ // 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; + outline-offset: $govuk-focus-offset; } color: $govuk-text-colour; background-color: $govuk-focus-colour; @@ -55,16 +24,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; - } -} diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss index a4d1d85caa..36668d29c4 100644 --- a/src/helpers/_links.scss +++ b/src/helpers/_links.scss @@ -10,7 +10,10 @@ @mixin govuk-link-common { @include govuk-typography-common; - @include govuk-focusable-text-link; + + &:focus { + @include govuk-focused-text; + } } /// Default link style mixin diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss index bbbd73c7f1..9081232b75 100644 --- a/src/settings/_measurements.scss +++ b/src/settings/_measurements.scss @@ -98,6 +98,8 @@ $govuk-border-width-form-group-error: $govuk-border-width !default; $govuk-focus-width: 3px !default; +$govuk-focus-offset: 0 !default; + /// Hover width for form controls with a hover state /// /// @type Number