Hover state for small radios/checkboxes shown when hovering non-clickable parts of component

[matteason]

Description of the issue

When hovering over the whitespace to the right of a small checkbox or radio, the grey hover state around the control is activated even though the bit you're hovering isn't clickable.

This happens because the hover state is activated by .govuk-checkboxes__item:hover. govuk-checkboxes__item has display: flex so grows to the width of its container, but the label only takes up the space needed by its content.

I know the hover state is there to show the clickable area but this caught me a bit off guard when using them - to me the hover state being shown implies that clicking will activate the control. It's a bit like on some other sites where you get buttons with hover states on the whole button but only the text is clickable, not the padding.

Steps to reproduce the issue

1. Open a page will small checkboxes (for example https://design-system.service.gov.uk/components/checkboxes/small/)
2. Hover over the whitespace to the right of a checkbox

2024-10-0214-32-37.605.mp4

Actual vs expected behaviour

I'd expect the hover state to only show when hovering over something clickable

Environment (where applicable)

• Operating system: Windows 11
• Browser: Chrome, Firefox
• GOV.UK Frontend Version: 5.6.0