From b2f2d876a2a991485b3ec4ccd43eb641dcda8103 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Fri, 3 May 2019 11:32:55 +0100 Subject: [PATCH 1/4] Add new focus style to buttons --- src/components/button/_button.scss | 46 ++++++++++++++++++------------ 1 file changed, 27 insertions(+), 19 deletions(-) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index fdc6760bcc..e699b71d89 100644 --- a/src/components/button/_button.scss +++ b/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,48 @@ 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. + @include govuk-not-ie8 { + outline: $govuk-focus-width solid transparent; + outline-offset: 0; + } + @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 as // non-container elements cannot include pseudo elements (i.e. ::before). @@ -175,8 +185,7 @@ } } - &:hover, - &:focus { + &:hover { background-color: $govuk-secondary-button-hover-colour; } } @@ -204,8 +213,7 @@ } } - &:hover, - &:focus { + &:hover { background-color: $govuk-warning-button-hover-colour; } } From 61d8596f436f94151572cd4113f11e1ea5061879 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 14:34:38 +0100 Subject: [PATCH 2/4] Allow build process to use :not(:hover) --- tasks/gulp/compile-assets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/gulp/compile-assets.js b/tasks/gulp/compile-assets.js index a2000e1c2f..80118e6453 100644 --- a/tasks/gulp/compile-assets.js +++ b/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 -------------- From 35301685025c1fcdf1e31817a8f47d31b01b6e32 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Mon, 13 May 2019 15:20:38 +0100 Subject: [PATCH 3/4] adds CHANGELOG entry --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33a591a333..e2ec411f06 100644 --- a/CHANGELOG.md +++ b/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`. From 604beb585f6f4cef135ab2612d3366b8dcd3c930 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 13 May 2019 15:38:09 +0100 Subject: [PATCH 4/4] Improve comments explaining IE8 logic --- src/components/button/_button.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index e699b71d89..ade3eac132 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -86,10 +86,12 @@ // 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;