Uploaded image for project: 'Jira Service Management Data Center'
  1. Jira Service Management Data Center
  2. JSDSERVER-12323

Service project page : Label not announced by screen reader.

XMLWordPrintable

      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

        1. Screenshot 2023-01-19 at 4.11.37 PM.png
          Screenshot 2023-01-19 at 4.11.37 PM.png
          506 kB
        2. Screenshot 2023-06-15 at 6.57.30 PM.png
          Screenshot 2023-06-15 at 6.57.30 PM.png
          822 kB

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

            Jim Alexander added a comment -

            Hey beeebe6f29a3 The code snippet doesn't reflect the actual html hierarchy for this input element.

            "Attachment (Optional)" Is definitely a label element but the inputs current label is "Browse". An input can't be associated with two labels. We have a few options:

            1. Do nothing as the file input type is already labelled
            2. Reword the "Browse" to include something in combination with the parent label "Attachments (optional)"
            3. Something more complicated where the greater box area acts as the input button and the field label "Attachments (optional)" actually represents the file input type

            Let me know what you think

            Jim Alexander added a comment - Hey beeebe6f29a3 The code snippet doesn't reflect the actual html hierarchy for this input element. "Attachment (Optional)" Is definitely a label element but the inputs current label is "Browse". An input can't be associated with two labels. We have a few options: Do nothing as the file input type is already labelled Reword the "Browse" to include something in combination with the parent label "Attachments (optional)" Something more complicated where the greater box area acts as the input button and the field label "Attachments (optional)" actually represents the file input type Let me know what you think

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

                Created:
                Updated:
                Resolved: