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

Accessibility Assessment - Roadmaps: Role defined inappropriately

XMLWordPrintable

      Issue Summary

      The form fields present in the main content area is not associated with the label.

      Steps to Reproduce

      1. Navigate to the "Plans" dropdown.
      2. Select any plan from the list.
      3. Navigate the page using screen reader.
      4. Ensure that label is not associated with the form field.

      Screenshot 1

      Screenshot 2

      Actual Results

      The listbox elements such as "Group by", "Color by", and "Sort by" have a visual label which is not associated with the dropdown options programmatically. As a result, screen reader users won't be able to understand if any user changes the values, the label will not be announced.

      Additionally state is not defined programmatically.

      Expected Results

      Apply the following changes:

      • Provide <label> element to "Group by", "Color by" and "Sort by".
      • Provide role "listbox" to the <div> element containing dropdown options such as "None", "Assignee", "Component', "Label", and so on. Similarly for the "Color by" and "sort by" options
      • Add "id" attribute to the <label> element and "aria-labelledby" attribute to the <button> element.
      • Remove role "menu" and "menuitem" from the respective elements.
      • set aria-expanded attribute to the <button> element, the value should be true in expanded state and false in collapsed state. Ensure on user interaction value should be change.

      Alternatively, if the above solution is not feasible we can also use a <select> and <option> elements to make it accessible. For more information refer this link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

      Code Snippet

      <label id="groupby">Group by</label>
<button class="sc-fAjcbJ leDjeL" spacing="default" type="button" aria-expanded="false">(...)</button>
<div aria-label="" role="listbox">
<span class="_3ykRA Item-z6qfkt-2 bfSyCq" aria-disabled="false" tabindex="0">
<span class="ItemParts__Content-sc-14xek3m-5 jRBaLt"><span>None</span></span>
<span class="ItemParts__Content-sc-14xek3m-5 jRBaLt"><span>Assignee</span></span>
(...)
</div>

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Environment

      MacBook Pro (16-inch, 2019)
      macOS Ventura Version 13.6.1
      Chrome - Version 120.0.6099.234 (Official Build) (x86_64)
      Firefox- Version 112.0.1 (64-bit)
      Safari- Version 17.3 (18617.2.4.11.9, 18617)
      JAWS- Version 2022
      NVDA- Version 2020.3

        1. image-2024-02-05-18-41-14-698.png
          image-2024-02-05-18-41-14-698.png
          662 kB
        2. image-2024-02-05-19-17-09-693.png
          image-2024-02-05-19-17-09-693.png
          650 kB

            [JSWSERVER-25579] Accessibility Assessment - Roadmaps: Role defined inappropriately

            Marc Dacanay made changes -
            Labels Original: 4.1.2 Level-A WCAG21 ax-at-user ax-bug ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa New: 4.1.2 Level-A WCAG21 ax-at-user ax-bug ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ril
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963661 ]
            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: 4.1.2 Level-A WCAG21 ax-at-user ax-bug ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa New: 4.1.2 Level-A WCAG21 ax-at-user ax-bug ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 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 -
            Status Original: Needs Triage [ 10030 ] New: Ready for Development [ 10049 ]
            Varsha Bansode made changes -
            Priority Original: Low [ 4 ] New: High [ 2 ]
            ssuryavanshi (Inactive) made changes -
            Component/s New: (Advanced Roadmaps) Other [ 73719 ]
            ssuryavanshi (Inactive) made changes -
            Component/s Original: Accessibility [ 62490 ]
            Component/s New: Accessibility [ 62491 ]
            Key Original: JRASERVER-77206 New: JSWSERVER-25579
            Affects Version/s Original: 9.12.2 [ 106456 ]
            Affects Version/s New: 9.12.2 [ 106455 ]
            Project Original: Jira Data Center [ 10240 ] New: Jira Software Data Center [ 12200 ]

              Unassigned Unassigned
              c3f9a46dc7c4 Varsha Bansode
              Affected customers:
              0 This affects my team
              Watchers:
              1 Start watching this issue

                Created:
                Updated: