Issue Summary

      The label "Attachment (Optional)" is not announced by the screen reader when the "browse" element is focused.

      Steps to Reproduce

      1. With screen reader turned on, navigate to "Service Project" page.
      2. 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

            [JSDSERVER-12323] Service project page : Label not announced by screen reader.

              fb78834a366d Jim Alexander
              beeebe6f29a3 Siddharaj Suryavanshi
              Affected customers:
              0 This affects my team
              Watchers:
              3 Start watching this issue

                Created:
                Updated:
                Resolved: