Merge pull request #3777 from alphagov/kg-radio-checkbox-outlines-hig…

…h-contrast

Fix hover style on small checkboxes and radio buttons in High Contrast Mode

CHANGELOG.md

@@ -252,6 +252,7 @@ This change was introduced in [pull request #3773: Omit the value attribute from
 
 We’ve made fixes to GOV.UK Frontend in the following pull requests:
 
+- [#3777: Fix hover style on small checkboxes and radio buttons in High Contrast Mode](https://github.com/alphagov/govuk-frontend/pull/3777)
 - [#3791: Refactor mobile menu button label/text handling](https://github.com/alphagov/govuk-frontend/pull/3791)
 - [#3862: Fix focus style being overlapped by summary action links](https://github.com/alphagov/govuk-frontend/pull/3862)
 

packages/govuk-frontend/src/govuk/components/checkboxes/_index.scss

@@ -273,6 +273,10 @@
     // feedback to the user as to which checkbox they will select when their
     // cursor is outside of the visible area.
     .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $govuk-focus-width dashed transparent;
+      outline-offset: 1px;
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -282,6 +286,10 @@
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
     .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {
+      // Set different HCM colour when we have both hover/focus applied at once
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        outline-color: Highlight;
+      }
       box-shadow:
         0 0 0 $govuk-focus-width $govuk-focus-colour, // 1
         0 0 0 $govuk-hover-width $govuk-hover-colour; // 2

packages/govuk-frontend/src/govuk/components/radios/_index.scss

@@ -293,6 +293,10 @@
     // feedback to the user as to which radio they will select when their
     // cursor is outside of the visible area.
     .govuk-radios__item:hover .govuk-radios__input:not(:disabled) + .govuk-radios__label::before {
+      // Forced colours modes tend to ignore box-shadow.
+      // Apply an outline for those modes to use instead.
+      outline: $govuk-radios-focus-width dashed transparent;
+      outline-offset: 1px;
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 
@@ -302,6 +306,10 @@
     // We use two box shadows, one that restores the original focus state [1]
     // and another that then applies the hover state [2].
     .govuk-radios__item:hover .govuk-radios__input:focus + .govuk-radios__label::before {
+      // Set different HCM colour when we have both hover/focus applied at once
+      @media screen and (forced-colors: active), (-ms-high-contrast: active) {
+        outline-color: Highlight;
+      }
       box-shadow:
         0 0 0 $govuk-radios-focus-width $govuk-focus-colour, // 1
         0 0 0 $govuk-hover-width        $govuk-hover-colour; // 2