Checkboxes are not associated with their labels

[trichoplax]

Describe the bug Checkboxes have nearby text to indicate what they are for, but this text is not associated so does not have the functionality of a label. As a result:

• Checking or unchecking the checkbox requires a steady hand to precisely click the checkbox itself rather than its label (clicking the label does nothing). This affects users with imprecise mouse control and users on a touchscreen device.
• The checkbox cannot be controlled through its label by assistive technologies such as screen readers.
• The checkbox cannot be referred to by its label in system tests, preventing a test from taking the same approach as a user (instead resorting to looking at aspects of the markup not visible to a user, making the test less relevant).

To Reproduce Steps to reproduce the behavior:

1. Go to any page
2. Click on the user avatar to visit the user page
3. Click on the Preferences tab
4. Click on the text "Auto follow comment threads"
5. See that its checkbox does not change The same appears to be the case for other checkboxes too.

Expected behavior Every checkbox should have a label associated with it. See <label>: The Label element on MDN.

[trichoplax]

Places to check

There may be other places that labels are required (not just checkboxes). Please edit to add any more places you find, or reply if you don't have access to edit and I can edit it in here.

• [ ] The Preferences tab of the user page (/users/me/preferences) (this one may be fixed by #1548 once finished)

[cellio]

Can this be addressed within the qpixel repo or do we need changes in co-design?

[trichoplax]

Can this be addressed within the qpixel repo or do we need changes in co-design?

This is an HTML issue rather than a CSS issue (we're lacking the <label> tag in the HTML), so the fix should hopefully be fully contained within the qpixel repo. Depends whether the HTML change has any side effects that require changes to styling.

For the Preferences tab specifically, I've tried out a simple change as part of pull request #1548 (because it was blocking a test I wanted to write) which seems to be working. If no problems emerge during review it looks like the styling remains intact and needs no CSS change. I don't know whether that will be true of any other places we find that need labels added.

For reference, the change to add labels for the Preferences tab just changes one <div> to a <label>