Merge pull request #854 from alphagov/visible-focus-when-overriding-c…

…olours

Show focus outlines when customising colours settings on Radios and Checkboxes

CHANGELOG.md

@@ -75,7 +75,13 @@
 
 - Fixes a bug where the phase banner incorrectly uses a font-size of 19px when
   global styles are enabled
-  ([PR #877}])https://github.com/alphagov/govuk-frontend/pull/877
+  ([PR #877](https://github.com/alphagov/govuk-frontend/pull/877))
+
+- Add outlines to Radios and Checkboxes for customised colour users
+
+  Now when a [user customises their colours](https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/),
+  they should see a focus state on both Radios and Checkboxes.
+  ([PR #854](https://github.com/alphagov/govuk-frontend/pull/854))
 
 🏠 Internal:
 

src/components/checkboxes/_checkboxes.scss

@@ -102,6 +102,11 @@
 
   // Focused state
   .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+    // Since box-shadows are removed when users customise their colours
+    // We set a transparent outline that is shown instead.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: $govuk-focus-width;
     box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
   }
 

src/components/radios/_radios.scss

@@ -10,6 +10,9 @@
 @include govuk-exports("govuk/component/radios") {
   $govuk-radios-size: govuk-spacing(7);
   $govuk-radios-label-padding-left-right: govuk-spacing(3);
+  // When the default focus width is used on a curved edge it looks visually smaller.
+  // So for the circular radios we bump the default to make it look visually consistent.
+  $govuk-radios-focus-width: $govuk-focus-width + 1px;
 
   .govuk-radios__item {
     @include govuk-font($size: 19);
@@ -99,7 +102,12 @@
 
   // Focused state
   .govuk-radios__input:focus + .govuk-radios__label::before {
-    box-shadow: 0 0 0 4px $govuk-focus-colour;
+    // Since box-shadows are removed when users customise their colours
+    // We set a transparent outline that is shown instead.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: $govuk-focus-width solid transparent;
+    outline-offset: $govuk-focus-width;
+    box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
   }
 
   // Selected state