From f121c99bf608470f9d6222c8de081aa6c5e953a6 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 15:32:49 +0100 Subject: [PATCH 1/9] Adding govuk-focusable-text-link mixin This approach uses box-shadow, which has broadly good support across browser. We have found that Edge and Internet Explorer produce rendering issues. Edge 18 has quite problematic issues but this can be seen on any website using custom focus styles. Edge 18 supports 'drop-shadow()' which can work but only on elements that are `diplay: inline`, with this in mind we think the complexity is not worth the cost to users for all browsers. Edge 19+ will be using the Chromium rendering engine so this will not be an issue. Edge 17 and below, and IE 9-11 have lesser issues that we have determined will not cause a barrier. See: https://gist.github.com/nickcolley/3788eefd34e7f04391de07867a85018b for an example of how `drop-shadow()` could work. Co-authored-by: Nick Colley --- src/helpers/_focusable.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/helpers/_focusable.scss b/src/helpers/_focusable.scss index 4b80de08cd..1ef15b7ded 100644 --- a/src/helpers/_focusable.scss +++ b/src/helpers/_focusable.scss @@ -32,3 +32,35 @@ background-color: $govuk-focus-colour; } } + +/// 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 { + // 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; + } +} From 1979c10ac7a760645bd9652ff3ede83124ceb76e Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 15:34:46 +0100 Subject: [PATCH 2/9] Update govuk-link-common mixin to use new govuk-focusable-text-link mixin Co-authored-by: Nick Colley --- src/helpers/_links.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss index 24240178bb..a4d1d85caa 100644 --- a/src/helpers/_links.scss +++ b/src/helpers/_links.scss @@ -10,7 +10,7 @@ @mixin govuk-link-common { @include govuk-typography-common; - @include govuk-focusable-fill; + @include govuk-focusable-text-link; } /// Default link style mixin From 09ff00c609d544f50a15a4310b7edd979adbf0db Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 15:35:46 +0100 Subject: [PATCH 3/9] Update back-link component focus to avoid duplicate border Co-authored-by: Nick Colley --- src/components/back-link/_back-link.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/back-link/_back-link.scss b/src/components/back-link/_back-link.scss index 5cfe3a0681..1707dc4d4d 100644 --- a/src/components/back-link/_back-link.scss +++ b/src/components/back-link/_back-link.scss @@ -25,6 +25,12 @@ // Underline is provided by a bottom border text-decoration: none; + // When the back link is focused, hide the bottom link border as the + // focus styles has a bottom border. + &:focus { + border-bottom-color: transparent; + } + // Prepend left pointing arrow &:before { @include govuk-shape-arrow($direction: left, $base: 10px, $height: 6px); From a921fcc6bfeb3d0bc960627cc91aeba8aaa59be5 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Tue, 30 Apr 2019 16:02:26 +0100 Subject: [PATCH 4/9] Update details focus styles to match updated focussed state We can remove a lot of the custom focus styles since they were relevant to the relationship between the background and outline which are not used anymore. Co-authored-by: Nick Colley --- src/components/details/_details.scss | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss index 44c80ad587..224bce7c6f 100644 --- a/src/components/details/_details.scss +++ b/src/components/details/_details.scss @@ -27,6 +27,12 @@ // Style the summary to look like a link... color: $govuk-link-colour; cursor: pointer; + + &:hover { + color: $govuk-link-hover-colour; + } + + @include govuk-focusable-text-link; } // ...but only underline the text, not the arrow @@ -34,18 +40,9 @@ text-decoration: underline; } - .govuk-details__summary:hover { - color: $govuk-link-hover-colour; - } - - .govuk-details__summary:focus { - // -1px offset fixes gap between background and outline in Firefox - outline: ($govuk-focus-width + 1px) solid $govuk-focus-colour; - outline-offset: -1px; - // When focussed, the text colour needs to be darker to ensure that colour - // contrast is still acceptable - color: $govuk-focus-text-colour; - background: $govuk-focus-colour; + // Remove the underline when focussed to avoid duplicate borders + .govuk-details__summary:focus .govuk-details__summary-text { + text-decoration: none; } // Remove the default details marker so we can style our own consistently and @@ -59,7 +56,7 @@ content: ""; position: absolute; - top: 0; + top: -1px; bottom: 0; left: 0; From 15709973949daf30a468da61dbf9e7e411624d93 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 30 Apr 2019 16:17:17 +0100 Subject: [PATCH 5/9] Add new focus style to error summary links --- src/components/error-summary/_error-summary.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 2b2d0e6823..6be17f2b8e 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -38,7 +38,7 @@ } .govuk-error-summary__list a { - @include govuk-focusable-fill; + @include govuk-focusable-text-link; @include govuk-typography-weight-bold; // Override default link styling to use error colour From 52a671249fee4ed4eaf42dac04fa16afbd0f5748 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 30 Apr 2019 16:28:30 +0100 Subject: [PATCH 6/9] Use simpler focus styles for skip-link component --- src/components/skip-link/_skip-link.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/skip-link/_skip-link.scss b/src/components/skip-link/_skip-link.scss index ddccb1d2e5..3146effcac 100644 --- a/src/components/skip-link/_skip-link.scss +++ b/src/components/skip-link/_skip-link.scss @@ -5,7 +5,8 @@ @include govuk-exports("govuk/component/skip-link") { .govuk-skip-link { @include govuk-visually-hidden-focusable; - @include govuk-link-common; + @include govuk-typography-common; + @include govuk-focusable-fill; @include govuk-link-style-text; @include govuk-typography-responsive($size: 16); From 3118967f040ecd695583fd1e24f8fb531743db05 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Tue, 30 Apr 2019 16:38:16 +0100 Subject: [PATCH 7/9] Update header to align with new focus state styles --- src/components/header/_header.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 3536abef97..f51b200c43 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -65,8 +65,6 @@ } .govuk-header__link { - @include govuk-focusable-fill; - text-decoration: none; &:link, @@ -78,6 +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 { @@ -116,6 +116,11 @@ // specified currentColor explicitly IE8 would ignore this rule. border-bottom: 1px solid; } + + // Remove any borders that show when focused and hovered. + &:focus { + border-bottom: 0; + } } .govuk-header__link--service-name { From eca6ca013cd00ea0471919e15e0c665c991d6169 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 1 May 2019 13:33:36 +0100 Subject: [PATCH 8/9] Remove incorrectly overriden error summary focus style When we updated the the focus styles for to have the same colour as the body text, we forgot to update the specific overrides we need when using GOV.UK Frontend with GOV.UK Template (legacy). This meant that when you focused a link in the error summary the color was red instead of black, removing this block achieves the result we want. --- src/components/error-summary/_error-summary.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 6be17f2b8e..e2faf59bb7 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -54,15 +54,6 @@ &:focus { color: $govuk-focus-text-colour; } - - // 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. - @include govuk-compatibility(govuk_template) { - &:link:focus { - color: $govuk-error-colour; - } - } } } From c0a6776917b9dbc27a06b3c34820f24d651f180a Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Wed, 8 May 2019 12:05:19 +0100 Subject: [PATCH 9/9] Add CHANGELOG entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3edcfc5fe5..404277f8b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ 💥 Breaking changes: +- Update links (and things that look like links) to use the new focus style + + To migrate: [TODO add migration instructions before we ship v3.0.0] + + ([PR #1309](https://github.com/alphagov/govuk-frontend/pull/1309)) + - 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`.