From 0c9229bfad09266546815cd5717fc4c4fb45f219 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 10 Sep 2020 16:51:09 +0100 Subject: [PATCH] Update links, and things that look like links Updates, and hacks, based on the changes in: https://github.com/alphagov/govuk-frontend/pull/1309/files --- .../stylesheets/govuk-frontend/_all.scss | 35 ++++++++---- .../govuk-frontend/focus/components.scss | 56 +++++++++++++++++++ .../govuk-frontend/focus/helpers.scss | 39 +++++++++++++ .../govuk-frontend/focus/settings.scss | 11 ++++ 4 files changed, 129 insertions(+), 12 deletions(-) create mode 100644 app/assets/stylesheets/govuk-frontend/focus/components.scss create mode 100644 app/assets/stylesheets/govuk-frontend/focus/helpers.scss create mode 100644 app/assets/stylesheets/govuk-frontend/focus/settings.scss diff --git a/app/assets/stylesheets/govuk-frontend/_all.scss b/app/assets/stylesheets/govuk-frontend/_all.scss index 2a49596b4..8249d38f3 100644 --- a/app/assets/stylesheets/govuk-frontend/_all.scss +++ b/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 -@import 'components/skip-link/_skip-link'; -@import 'components/header/_header'; -@import 'components/footer/_footer'; -@import 'components/back-link/_back-link'; -@import 'components/button/_button'; -@import 'components/details/_details'; -@import 'components/radios/_radios'; -@import 'components/checkboxes/_checkboxes'; -@import 'components/input/_input'; +// section replacing @import "components/all", specifying which components to include +@import "components/skip-link/_skip-link"; +@import "components/header/_header"; +@import "components/footer/_footer"; +@import "components/back-link/_back-link"; +@import "components/button/_button"; +@import "components/details/_details"; +@import "components/radios/_radios"; +@import "components/checkboxes/_checkboxes"; +@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"; diff --git a/app/assets/stylesheets/govuk-frontend/focus/components.scss b/app/assets/stylesheets/govuk-frontend/focus/components.scss new file mode 100644 index 000000000..c05b4f9fe --- /dev/null +++ b/app/assets/stylesheets/govuk-frontend/focus/components.scss @@ -0,0 +1,56 @@ +// 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 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; +} diff --git a/app/assets/stylesheets/govuk-frontend/focus/helpers.scss b/app/assets/stylesheets/govuk-frontend/focus/helpers.scss new file mode 100644 index 000000000..6e05b2996 --- /dev/null +++ b/app/assets/stylesheets/govuk-frontend/focus/helpers.scss @@ -0,0 +1,39 @@ +// 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 + +/// 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. + + // 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; + } +} diff --git a/app/assets/stylesheets/govuk-frontend/focus/settings.scss b/app/assets/stylesheets/govuk-frontend/focus/settings.scss new file mode 100644 index 000000000..4bc131707 --- /dev/null +++ b/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