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