Fix alignment of content in conditional checkboxes and radio buttons

[querkmachine]

Checkboxes and radio buttons are visually 40 pixels wide, however their actual width on the page is 44 pixels, with an invisible 2 pixel 'border' around the input that the conditional area's margin-left calculation didn't account for.

Fixes #5069.

Changes

• Amends the $conditional-border-padding calculation in both components to use $govuk-touch-target-size instead of $govuk-checkboxes-size or $govuk-radios-size.
• Adds conditional checkboxes and radios with expanded content to the list of things Percy should screenshot, to help avoid future regressions of this kind.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	113.43 KiB
dist/govuk-frontend-development.min.js	41.88 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	87.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	82.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs	981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.42 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	41.87 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	4.86 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	79.24 KiB	39.84 KiB
accordion.mjs	23.5 KiB	12.39 KiB
button.mjs	5.98 KiB	2.69 KiB
character-count.mjs	22.4 KiB	9.92 KiB
checkboxes.mjs	5.83 KiB	2.83 KiB
error-summary.mjs	7.89 KiB	3.46 KiB
exit-this-page.mjs	17.1 KiB	9.26 KiB
header.mjs	4.46 KiB	2.6 KiB
notification-banner.mjs	6.26 KiB	2.62 KiB
password-input.mjs	15.15 KiB	7.25 KiB
radios.mjs	4.83 KiB	2.38 KiB
skip-link.mjs	4.39 KiB	2.18 KiB
tabs.mjs	10.13 KiB	6.11 KiB

View stats and visualisations on the review app

---

Action run for 4e83cf8

[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 f0aa66d38..fd84364d2 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2597,8 +2597,8 @@ screen and (forced-colors:active) {
 
 .govuk-checkboxes__conditional {
     margin-bottom: 15px;
-    margin-left: 18px;
-    padding-left: 33px;
+    margin-left: 20px;
+    padding-left: 35px;
     border-left: 4px solid #b1b4b6
 }
 
@@ -4988,8 +4988,8 @@ screen and (forced-colors:active) {
 
 .govuk-radios__conditional {
     margin-bottom: 15px;
-    margin-left: 18px;
-    padding-left: 33px;
+    margin-left: 20px;
+    padding-left: 35px;
     border-left: 4px solid #b1b4b6
 }
 

---

Action run for 4e83cf8

[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 d34fc39f5..625330c4a 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/_index.scss
@@ -159,7 +159,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
-  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
index dd60af5f1..afe492aa7 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
@@ -663,7 +663,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
index 51fc8055d..602ba8f57 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/radios/_index.scss
@@ -176,7 +176,7 @@
   // to be an even number in order to be centred under the 40px checkbox or radio.
   $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the radios.
-  $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
+  $conditional-border-padding: ($govuk-touch-target-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the radios
   $conditional-margin-left: $conditional-border-padding;
   // Move the contents of the conditional inline with the label
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
index b72059485..c346ad4a8 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
@@ -439,7 +439,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "screenshot": false,
+            "screenshot": true,
             "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {

---

Action run for 4e83cf8

[36degrees]

Needs a changelog entry, but otherwise makes sense to me. Good shout to add visual regression tests – thanks for doing that.

Does make me wonder when this changed 🤔