From 9625612006e9cb9498f0e663138e99cced0931a5 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 2 Jul 2018 12:14:17 +0100 Subject: [PATCH 1/3] Add Checkboxes outlines for customised colour users --- src/components/checkboxes/_checkboxes.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss index e5c7dc1d6e..ea2168978f 100644 --- a/src/components/checkboxes/_checkboxes.scss +++ b/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; } From d551da0c8aa45f7af9250ba18a0254f3de737c76 Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 2 Jul 2018 12:14:50 +0100 Subject: [PATCH 2/3] Add Radios outline for customised colours users --- src/components/radios/_radios.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss index c3ad659d4a..2f9df8d8f5 100644 --- a/src/components/radios/_radios.scss +++ b/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 From 3e0d43c4cb491a528357adabeb5a90b4ca684dec Mon Sep 17 00:00:00 2001 From: Nick Colley Date: Mon, 9 Jul 2018 11:31:01 +0100 Subject: [PATCH 3/3] Update CHANGELOG --- CHANGELOG.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7658cc9c26..1995f0096d 100644 --- a/CHANGELOG.md +++ b/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: