Add outlines to small radios and checkboxes

Forced colour modes (like Windows High Contrast Mode) ignore the box-shadow styling we apply to small checkboxes and radio
buttons on hover.

This change adds an outline on hover too, so that a visual change still takes place upon hovering in High Contrast Mode.

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: $govuk-focus-width;
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }
 

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: $govuk-radios-focus-width;
       box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;
     }