Merge pull request #4768 from alphagov/fix-radio-z-index

Fix `z-index` of inputs in Radios and Checkboxes component

CHANGELOG.md

@@ -56,6 +56,12 @@ As the beginning of the GOV.UK logo rollout has passed, the Tudor crown logo is
 
 The `useTudorCrown` parameter, along with any other adjustments made to display the Tudor crown logo in your service, can now be removed.
 
+### Fixes
+
+We've made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#4768 : Fix z-index of inputs in Radios and Checkboxes component](https://github.com/alphagov/govuk-frontend/pull/4768)
+
 ## 5.1.0 (Feature release)
 
 To install this version with npm, run `npm install govuk-frontend@5.1.0`. You can also find more information about [how to stay up to date in our documentation](https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version).

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

@@ -24,6 +24,9 @@
   }
 
   .govuk-checkboxes__input {
+    // Allow the input to sit above the label, enabling its proper detection
+    // when exploring by touch or using automation tools like Selenium
+    z-index: 1;
     width: $govuk-touch-target-size;
     height: $govuk-touch-target-size;
     margin: 0;