Issue Summary
The label "Attachment (Optional)" is not announced by the screen reader when the "browse" element is focused.
Steps to Reproduce
- With screen reader turned on, navigate to "Service Project" page.
- Navigate to "browse" element and observe label "Attachment (Optional)" is not announced by screen reader.
Actual Results
While navigating with screen reader, when user navigate to the "browse" input field the visual label "Attachment (Optional)" is not announced by the screen reader to their users. The label is not associated correctly with the input field in the code.
This makes screen reader users difficult to understand the purpose of the input field effectively.
Screenshot
Expected Results
When user tabs into the input field the corresponding visual label should be announced by the screen reader. For that the label & input fields must be associated with each other programmatically via for/id attributes.
Ensure that the value of "for" attribute provided to "Attachment (Optional)" label match with the value of "id" attribute of "browse" input field.
Code snippet:
<label class="field-label" for="request-attachment" id="attachment-label">Attachment <span class="vp-optional">(optional)</span></label>
<input tabindex="0" type="file" multiple="multiple" name="attachment" id="request-attachment" class="attachment-control">
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Bug
High
