diff --git a/CHANGELOG.md b/CHANGELOG.md index b811d8ae4a..06da56c33a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## Unreleased +### Fixes + +We’ve made fixes to GOV.UK Frontend in the following pull requests: + +- [#2264: Improve focus state for radio and checkbox controls in forced color mode (for example Windows High Contrast Mode)](https://github.com/alphagov/govuk-frontend/pull/2264) – thanks to [@adamliptrot-oc](https://github.com/adamliptrot-oc) for reporting this issue. + ## 3.13.0 (Feature release) ### New features diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss index e0879afc1f..204ff14a6d 100644 --- a/src/govuk/components/checkboxes/_index.scss +++ b/src/govuk/components/checkboxes/_index.scss @@ -122,6 +122,20 @@ // Focused state .govuk-checkboxes__input:focus + .govuk-checkboxes__label:before { border-width: 4px; + + // When colours are overridden, the yellow box-shadow becomes invisible + // which means the focus state is less obvious. By adding a transparent + // outline, which becomes solid (text-coloured) in that context, we ensure + // the focus remains clearly visible. + outline: $govuk-focus-width solid transparent; + outline-offset: 1px; + + // When in an explicit forced-color mode, we can use the Highlight system + // color for the outline to better match focus states of native controls + @media screen and (forced-colors: active) { + outline-color: Highlight; + } + box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour; } diff --git a/src/govuk/components/radios/_index.scss b/src/govuk/components/radios/_index.scss index 6c25b46db1..1b3801ea67 100644 --- a/src/govuk/components/radios/_index.scss +++ b/src/govuk/components/radios/_index.scss @@ -120,6 +120,20 @@ // Focused state .govuk-radios__input:focus + .govuk-radios__label:before { border-width: 4px; + + // When colours are overridden, the yellow box-shadow becomes invisible + // which means the focus state is less obvious. By adding a transparent + // outline, which becomes solid (text-coloured) in that context, we ensure + // the focus remains clearly visible. + outline: $govuk-focus-width solid transparent; + outline-offset: 1px; + + // When in an explicit forced-color mode, we can use the Highlight system + // color for the outline to better match focus states of native controls + @media screen and (forced-colors: active) { + outline-color: Highlight; + } + box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour; }