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

      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

        1. image-2024-02-12-15-37-54-593.png
          image-2024-02-12-15-37-54-593.png
          693 kB

            [JSWSERVER-25565] Accessibility Assessment | Teams: Incorrect explicit association for form fields

            Marc Dacanay made changes -
            Labels Original: 1.3.1 Level-A WCAG2.1 a11y-triaged ax-at-NVDA ax-at-VO ax-at-jaws ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassesmentteams ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg04 ax-macos-safari ax-qa New: 1.3.1 Level-A WCAG2.1 a11y-triaged ax-at-NVDA ax-at-VO ax-at-jaws ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassesmentteams ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg04 ax-macos-safari ax-qa ril
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963648 ]
            Sylwia Mikołajczuk made changes -
            Priority Original: High [ 2 ] New: Medium [ 3 ]
            Stasiu made changes -
            Introduced in Version Original: 9.12 New: 8.2
            Affects Version/s New: 8.20.30 [ 106364 ]
            Affects Version/s New: 9.4.17 [ 106909 ]
            Sylwia Mikołajczuk made changes -
            Labels Original: 1.3.1 Level-A WCAG2.1 a11y-triaged ax-at-NVDA ax-at-VO ax-at-jaws ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassesmentteams ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg04 ax-macos-safari ax-qa New: 1.3.1 Level-A WCAG2.1 a11y-triaged ax-at-NVDA ax-at-VO ax-at-jaws ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassesmentteams ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg04 ax-macos-safari ax-qa
            Stasiu made changes -
            Component/s Original: Accessibility [ 62491 ]
            Component/s Original: (Advanced Roadmaps) Other [ 73719 ]
            Component/s New: (Advanced Roadmaps) Accessibility [ 74392 ]
            Stasiu made changes -
            Priority Original: Low [ 4 ] New: High [ 2 ]
            Varsha Bansode made changes -
            Description Original: h3. 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).
            h3. Steps to Reproduce
             # Open the "Accessibility Assessment | Teams" page.
             # Navigate to the main content.
             # Navigate to the "Add team" button and activate it.
             # A modal dialog appears on the page.
             # Navigate to the mentioned form fields.
             # Inspect the code.
             # Observe that the form field is not correctly associated with its visual label.

            h3. Screenshot

             
            h3. 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.
            h3. Expected Results
            {noformat}
            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;">{noformat}
            h3. 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
            h3. 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             		New: h3. 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).
            h3. Steps to Reproduce
             # Open the "Accessibility Assessment | Teams" page.
             # Navigate to the main content.
             # Navigate to the "Add team" button and activate it.
             # A modal dialog appears on the page.
             # Navigate to the mentioned form fields.
             # Inspect the code.
             # Observe that the form field is not correctly associated with its visual label.

            h3. Screenshot

            !image-2024-02-12-15-37-54-593.png|thumbnail!
            h3. 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.
            h3. 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*
            {noformat}
            <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;">{noformat}
            h3. 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
            h3. 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
            Varsha Bansode made changes -
            Attachment New: image-2024-02-12-15-37-54-593.png [ 452079 ]
            Sylwia Mikołajczuk made changes -
            Labels Original: 1.3.1 Level-A WCAG2.1 a11y-triaged ax-at-NVDA ax-at-VO ax-at-jaws ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassesmentteams ax-jiradc-vpat-pg04 ax-macos-safari ax-qa New: 1.3.1 Level-A WCAG2.1 a11y-triaged ax-at-NVDA ax-at-VO ax-at-jaws ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassesmentteams ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg04 ax-macos-safari ax-qa

              Unassigned Unassigned
              4cbd728b4726 Rinku Kumar
              Affected customers:
              0 This affects my team
              Watchers:
              2 Start watching this issue

                Created:
                Updated: