Add a new applied variable for focus text colour

alphagov · Sep 7, 2018 · 16a6272 · 16a6272
1 parent de1c426
commit 16a6272
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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