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: 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; } 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