Change span to label so for attribute works

lite_forms/templates/components.html

@@ -18,25 +18,25 @@
 		</label>
 	{% endif %}
 	{% if question.description %}
-		<span class="govuk-hint" for="{{ question.name }}">
+		<label class="govuk-hint" for="{{ question.name }}">
 			<span>{{ question.description|safe }}</span>
-		</span>
+		</label>
 	{% endif %}
 	{% if question.accessible_description %}
-		<span class="govuk-hint govuk-visually-hidden" for="{{ question.name }}">
+		<label class="govuk-hint govuk-visually-hidden" for="{{ question.name }}">
 			{{ question.accessible_description }}
-		</span>
+		</label>
 	{% endif %}
 
 	<!-- Error -->
 	{% if errors %}
 		{% if errors|key_value:question.name and question.input_type != "hidden" %}
-			<span id="error-{{ question.name }}" for="{{ question.name }}" class="govuk-error-message">
+			<label id="error-{{ question.name }}" for="{{ question.name }}" class="govuk-error-message">
 				<span class="govuk-visually-hidden">Error:</span>
 				{% for error in errors|key_value:question.name %}
 					{{ error }}
 				{% endfor %}
-			</span>
+			</label>
 		{% endif %}
 	{% endif %}