36degrees
commented
3 years ago Had a quick play with this and it looks like we might be able to use the Highlight system colour keyword to add an outline that's consistent with the focus outline used for native inputs.
For example:
// Focused state
.govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
border-width: 4px;
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
@media screen and (forced-colors: active) {
outline: $govuk-focus-width solid highlight;
outline-offset: 1px;
}
}
The focus state on radios unfortunately is not as neat as there's no outline-radius.
It might be possible to use forced-color-adjust: none and use the box shadow to take more control over the radio focus style, but we'd need to be very careful to respect the forced color styles and test thoroughly…
If we wanted to support older browsers that don't support the forced-colors media query, we could also add a transparent outline outside of the media query which would work in these older browsers, but it'd match currentColor (in this example, a white outline) rather than matching the other focus styles. I believe we used to do this before the changes in #1316.
Description of the issue
There seems to be a discrepancy between how native radios are displayed in Windows High Contrast and how GOVUK ones are - the highlight colour used on native inputs (including the text boxes in the Design System) is missing from the focus and selected states of radios (and checkboxes), probably down to the way in which the pseudo control is built. This makes the focus state somewhat less visible than the native version.
Screenshot shows Design System with focussed (top), selected and unselected/unfocussed vs native elements on the right (focussed at top, selected below).
Screenshot to show Design System text input focus state
Steps to reproduce the issue
Open https://design-system.service.gov.uk/components/radios/ in MS Edge on Windows and enable Windows High Contrast Mode
Actual vs expected behaviour
Expectation is that the Design System radios and checkboxes to follow the native colouring in line with the Design System's text inputs, but they use white instead of the blue highlight which makes them much less obvious as the default state is also white.
Environment (where applicable)