From 7dcba7d60cffba802e48f32d2c6f2349d0f450eb Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Thu, 1 Jul 2021 17:27:44 +0100
Subject: [PATCH 1/2] Improve focus for controls in forced color mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 14 ++++++++++++++
 src/govuk/components/radios/_index.scss     | 14 ++++++++++++++
 2 files changed, 28 insertions(+)

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

From 775d940bee0afeecccb553ace83f9237b7d45748 Mon Sep 17 00:00:00 2001
From: Oliver Byford <oliver.byford@digital.cabinet-office.gov.uk>
Date: Fri, 2 Jul 2021 12:00:40 +0100
Subject: [PATCH 2/2] Document in CHANGELOG

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

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