From 16a6272c7f711c68d4618a2bebf79b8227b49198 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Thu, 6 Sep 2018 16:59:42 +0100 Subject: [PATCH] Add a new applied variable for focus text colour --- src/components/details/_details.scss | 2 +- src/components/error-summary/_error-summary.scss | 2 +- src/components/footer/_footer.scss | 5 +++-- src/components/header/_header.scss | 4 ++-- src/helpers/_links.scss | 4 ++-- src/settings/_colours-applied.scss | 10 ++++++++++ 6 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss index 5ae2c5fc90..44c80ad587 100644 --- a/src/components/details/_details.scss +++ b/src/components/details/_details.scss @@ -44,7 +44,7 @@ outline-offset: -1px; // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable - color: $govuk-text-colour; + color: $govuk-focus-text-colour; background: $govuk-focus-colour; } diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss index 99e61ecf38..81a38abd87 100644 --- a/src/components/error-summary/_error-summary.scss +++ b/src/components/error-summary/_error-summary.scss @@ -56,7 +56,7 @@ // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } // alphagov/govuk_template includes a specific a:link:focus selector diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index 30de5f5c49..e91801b04c 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -43,9 +43,10 @@ color: $govuk-footer-link-hover; } - // Use text colour when focussed + // When focussed, the text colour needs to be darker to ensure that colour + // contrast is still acceptable &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } // alphagov/govuk_template includes a specific a:link:focus selector diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 66bd1fac4b..751e21c70b 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -79,7 +79,7 @@ // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } // alphagov/govuk_template includes a specific a:link:focus selector @@ -245,7 +245,7 @@ // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } } } diff --git a/src/helpers/_links.scss b/src/helpers/_links.scss index f2a0833f57..383ed37f28 100644 --- a/src/helpers/_links.scss +++ b/src/helpers/_links.scss @@ -48,7 +48,7 @@ // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } } @@ -79,7 +79,7 @@ // When focussed, the text colour needs to be darker to ensure that colour // contrast is still acceptable &:focus { - color: $govuk-text-colour; + color: $govuk-focus-text-colour; } // alphagov/govuk_template includes a specific a:link:focus selector designed diff --git a/src/settings/_colours-applied.scss b/src/settings/_colours-applied.scss index 59eea79fea..a08c168445 100644 --- a/src/settings/_colours-applied.scss +++ b/src/settings/_colours-applied.scss @@ -68,6 +68,16 @@ $govuk-secondary-text-colour: govuk-colour("grey-1") !default; $govuk-focus-colour: govuk-colour("yellow") !default; +/// Focused text colour +/// +/// Ensure that the contrast between the text and background colour passes +/// WCAG Level AA contrast requirements. +/// +/// @type Colour +/// @access public + +$govuk-focus-text-colour: govuk-colour("black") !default; + /// Error colour /// /// Used to highlight error messages and form controls in an error state