Uploaded image for project: 'Jira Software Data Center'
  1. Jira Software Data Center
  2. JSWSERVER-25565

Accessibility Assessment | Teams: Incorrect explicit association for form fields

    XMLWordPrintable

Details

    Description

      Issue Summary

      On the Accessibility Assessment | Teams page, the "Associated issue source", "Team type" and "Members" form fields are not correctly associated with their visual labels in the modal dialog (that becomes available on activating "Add team" button).

      Steps to Reproduce

      1. Open the "Accessibility Assessment | Teams" page.
      2. Navigate to the main content.
      3. Navigate to the "Add team" button and activate it.
      4. A modal dialog appears on the page.
      5. Navigate to the mentioned form fields.
      6. Inspect the code.
      7. Observe that the form field is not correctly associated with its visual label.

      Screenshot

      Actual Results

      The "Associated issue source", "Team type" and "Members" form fields are not correctly associated with their visual labels using “for” and “id” attributes. The <label> and <input> elements although use “for” and “id” attributes respectively in the DOM. However, the values within the “for” and “id” attributes do not match appropriately. As a result, users of assistive technologies found it challenging to interact with the form fields.

      Expected Results

      The labels and the form fields should be correctly explicitly associated. To implement this, use <label> element. As well, associate the <label> element with the form field using “for” and “id” attributes. Make sure that the values within “for” and “id” match appropriately.

      Code Snippet

      <label class="Field__Label-vqybw1-1 ghWQGY" id="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-label" for="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c">Associated issue source</label>
      <input autocapitalize="none" autocomplete="off" autocorrect="off" id="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-labelledby="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-label issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-helper issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-valid issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-error" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">

      Workaround

      Required, if there is no workaround please state:
      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Environment

      MacBook Pro (16-inch, 2021)
      macOs Monterey Version 12.3.1
      Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 15.3 (17612.4.9.1.5)
      JAWS- Version 2022
      NVDA- Version 2020.3
      Voiceover - Version Latest

      Attachments

        Activity

          People

            Unassigned Unassigned
            4cbd728b4726 Rinku Kumar
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated: