Classifier: Use explicit labelling for workflow tasks

[eatyourgreens]

Package

Choose from the list:

• app-content-pages
• app-project
• lib-classifier
• lib-panoptes-js
• lib-react-components
• unknown

Describe the bug

When form inputs are labelled in workflow tasks, they tend to use implicit labelling, where the label wraps its associated input. Implicit labels aren't well supported by assistive technology and explicit labels are preferred, where the for attribute is used to link a label to its input.

• Naming Form Controls with the Label Element recommends incorrect technique w3c/aria-practices#2870

To Reproduce

Inspect the label for a task input and check whether it uses the for attribute.

Expected behavior

Accessible form inputs should use explicit labels, with for attributes.

[eatyourgreens]

Looking at the code for question tasks and drawing tasks, it's not immediately clear whether the label is linked to the input at all.

front-end-monorepo/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js

Lines 124 to 136 in 9521f81

	<input
	autoFocus={autoFocus}
	checked={checked}
	disabled={disabled}
	name={name}
	onChange={onChange}
	type={type}
	value={index}
	/>
	<StyledTaskLabel margin={{ vertical: 'small', horizontal: 'none' }}>
	<TaskInputLabel label={label} labelIcon={labelIcon} labelStatus={labelStatus} />
	</StyledTaskLabel>
	</StyledTaskInput>

EDIT: StyledTaskLabel is a HTML <span>, not a <label>, so the naming isn't quite right there.