Clean up labelling in the Discussion Add Post form

Location: 06 Discussion - Add Post

Severity: 10

Description: The radio buttons Question and Discussion are implemented with proper label with a for attribute that corresponds to the ID of the field, a fieldset and legend for the question, and aria-describedby for the hint. However, the entire container is also within a label element. JAWS does not render the radio buttons labels as expected.
Similarly, the Topic area combo box is not properly labeled which makes JAWS render the label and the hint in a non optimal manner.

Pattern: None

Auditor Note: Developers must ensure that the structure of the labels for the form fields are appropriate to ensure that assistive technologies render the labels properly as expected. In this case, remove the label element as a parent container and ensure only the visual labels have the label element around them with the proper for attribute that corresponds to the ID of the fields. The hidden fieldset and legend for the radio buttons are not necessary if the on-screen labels are implemented with fieldset and legend elements.

<fieldset class="field-label">
<legend class="field-label-text">
Post type
</legend>
<div class="field-help" id="field_help_post_type">
Questions raise issues that need answers. Discussions share ideas and start conversations. (Required)
</div>
<div class="field-label">
<label for="form-12-post-type-question" class="post-type-label">
<input aria-describedby="field_help_post_type" name="form-12-post-type" class="field-input input-radio" id="form-12-post-type-question" value="question" type="radio">
<span class="field-input-label">
<span class="icon fa fa-question" aria-hidden="true"></span>
Question
</span>
</label>
...
</div>
</fieldset>

Compliant example for Topic area combo box:
<div class="field-label">
<label for="topic" class="field-label-text">
Topic area
</label>
<div class="field-help" id="field_help_topic_area">
Add your post to a relevant topic to help others find it. (Required)
</div>
<div class="field-input">
<select id="topic" class="post-topic field-input" aria-describedby="field_help_topic_area" required="">
...
</select>
</div>
</div>
Compliant Example for the Post Type Radio buttons:

Internal Note: I have a feeling we did not have the option of implementing this correctly which is why we implemented this fairly hacky solution. If this is the case, we should at the very least remove the label element on the visual Post type label and leave the SR only one. I also agree that we should use explicit labelling for the Topic area since the help text is both a label and a description.