Checkbox labels are full-width

[36degrees]

Bug Report

What is the issue?

Checkbox labels are full-width, which means the entire area to the right of the visible label is clickable:

Screen.Recording.2022-09-08.at.09.22.16.mov

This is notably different to the way that labels for radios work:

Screen.Recording.2022-09-08.at.09.21.33.mov

I am pretty confident that this is an unintentional side effect of a change made after the components were copied from GOV.UK Frontend, affecting the order that the components appears in the outputted CSS – see below for details.

What steps are required to reproduce the issue?

1. Go to https://service-manual.nhs.uk/design-system/components/checkboxes
2. Click the area to the right of a check box label

Expected result: The checkbox should not be activated
Expected result: The checkbox gets activated

What was the environment where this issue occurred?

• Device: Macbook Pro
• Operating System: macOS 12.5.1
• Browser: Chrome
• Browser version: 105.0.5195.102
• NHS.UK frontend package version: Latest (as seen on https://service-manual.nhs.uk/design-system/components/checkboxes)
• Node version: N/A
• npm version: N/A

Is there anything else you think would be useful in recreating the issue?

In both GOV.UK Frontend and NHS Frontend, the label elements for checkboxes and radios have both the __label modifier class for the component and the label class from the label component.

The __label modifier class has display: inline-block:

nhsuk-frontend/packages/components/checkboxes/_checkboxes.scss

Lines 41 to 48 in 8ca299a

	.nhsuk-checkboxes__label {
	cursor: pointer;
	display: inline-block;
	margin-bottom: 0;
	padding: 8px $nhsuk-checkboxes-label-padding-left-right nhsuk-spacing(1);
	-ms-touch-action: manipulation; /* 1 */
	touch-action: manipulation;
	}

The label class has display: block:

nhsuk-frontend/packages/components/label/_label.scss

Lines 5 to 10 in 8ca299a

	.nhsuk-label {
	@include nhsuk-font(19);
	display: block;
	margin-bottom: nhsuk-spacing(1);
	}

Importantly, both classes have the same specificity, and so whichever appears in the CSS last 'wins'.

Components in GOV.UK Frontend that rely on other components import them at the top of the file. For example, the checkboxes component relies on the label component, and so imports it (see https://github.com/alphagov/govuk-frontend/blob/3f264256fa01c8d5b5d4e8121756e50d866eda7d/src/govuk/components/checkboxes/_index.scss#L1-L6)

This means that the CSS for labels will appear before the CSS for checkboxes and radios in GOV.UK Frontend.

For whatever reason, NHS Frontend doesn't do this. Therefore the components appear in the CSS in the order they're imported, which is alphabetical.

This means the label component comes after the checkboxes, overriding the display property, but radios comes after label and so radios still get display: inline-block as intended.

[mcheung-nhs]

Thanks @36degrees for the spot 👀
The issue was definitely unintentional so I've reordered the CSS.