Improve focus for controls in forced color mode

The focus state for radios and checkboxes is currently not very visible in high contrast mode or when colours are overridden in Firefox – the only visible change is that the outer border of the radio or checkbox control thickens from 2px to 4px. This is the same as the part of the focus state change that meets contrast, but omits the yellow ‘ring’ created by the box shadow.

Add an additional transparent outline to the control. In forced colors mode, transparent borders become solid (matching the text / foreground color) and so we get an additional outline around the focused control making it clearly visible.

When explicitly in forced-color mode, we can enhance the outline further by using the Highlight system color, which matches the color used by the focus state of native controls – at least in in Edge / Chrome / Opera which are the only other browsers to support forced color mode.

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

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