Fix z-index of inputs in Radios and Checkboxes component

[romaricpascal]

The z-index: 1 declaration laying out the input above their corresponding label had disappeared when we updated how the elements were laid out to Flexbox. This broke Selenium testing suites trying to click the input (now covered by its label).

This PR reinstates the declaration, and adds automated tests for both components to ensure the order in which the elements are overlaid is checked so we won't miss this in the future.

Closes #4762

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	112.47 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	112.46 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

---

Action run for 401dc2c

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 081ea2694..7f08b23bf 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2476,6 +2476,7 @@
 }
 
 .govuk-checkboxes__input {
+    z-index: 1;
     width: 44px;
     height: 44px;
     margin: 0;
@@ -4815,6 +4816,7 @@ only screen and (min-resolution:2dppx) {
 }
 
 .govuk-radios__input {
+    z-index: 1;
     width: 44px;
     height: 44px;
     margin: 0;

---

Action run for 401dc2c

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
index 5b1223d69..eb2ce95b0 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/dist/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;
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index 804aeb214..edb04303b 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -26,6 +26,9 @@
   }
 
   .govuk-radios__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;

---

Action run for 401dc2c

[owenatgov]

Brill!