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

Accessibility assessment | Roadmaps : Focus navigates onto the same components multiple times

XMLWordPrintable

      Issue Summary

      On the "Accessibility assessment | Roadmaps" page, Focus inappropriately navigates onto the "3M", "1Y", and so on, buttons twice.

      Steps to Reproduce

      1. Navigate onto the above mentioned page.
      2. Navigate onto the "Filter" button and activate it.
      3. Using just your keyboard, tab through the above.
      4. Observe the keyboard focus order.
      5. Observe that focus goes onto the same component multiple times.

      Screen Recording

      Screen Recording 2024-02-12 at 11.59.28 AM.mov

      Actual Results

      The "3M", "1Y", and so on, buttons receives keyboard focus multiple times. This is because the parent <div> elements containing the <button> elements inappropriately use tabindex="0" along with role="menuitem". This may particularly disadvantage keyboard users who often navigate by tabbing through the interactive elements. The focus order may suggest that these component are multiple, separate controls, rather than single components.

      Expected Results

      Interactive elements must not receive keyboard focus multiple times.
Make sure that focus only goes onto the interactive elements once. Refactor the components to provide a logical focus order. Avoid nesting interactive items. As well, avoid using tabindex="0" on elements that contain interactive elements.
In this case, we would recommend you to remove the tabindex="0" and role="menuitem" attributes from the parent <div> elements containing the buttons in the DOM.
Code Snippet
<ul>
  <li><button aria-pressed="true">3M</button></li>
  <li><button>1Y</button></li>
  ...
</ul>

      Workaround

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

      Environment

      MacBook Pro (16-inch, 2021)
      macOs Ventura 13.3.1
      Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2023
      NVDA- Version 2023.3
      Voiceover - Version Latest

        1. Screen Recording 2024-02-12 at 11.59.28 AM.mov
          5.55 MB
          Varsha Bansode

            [JSWSERVER-25753] Accessibility assessment | Roadmaps : Focus navigates onto the same components multiple times

            Marc Dacanay made changes -
            Labels Original: 2.4.3 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-kb-user ax-qa level-A wcag21 New: 2.4.3 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-kb-user ax-qa level-A ril wcag21
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963924 ]
            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: 2.4.3 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-kb-user ax-qa level-A wcag21 New: 2.4.3 4.1.2 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-kb-user ax-qa level-A wcag21
            Stasiu made changes -
            Component/s Original: (Advanced Roadmaps) Other [ 73719 ]
            Stasiu made changes -
            Status Original: Needs Triage [ 10030 ] New: Ready for Development [ 10049 ]
            Stasiu made changes -
            Component/s New: (Advanced Roadmaps) Accessibility [ 74392 ]
            Varsha Bansode made changes -
            Description Original: h3. Issue Summary

            On the "Accessibility assessment | Roadmaps" page, Focus inappropriately navigates onto the "3M", "1Y", and so on, buttons twice.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "Filter" button and activate it.
             # Using just your keyboard, tab through the above.
             # Observe the keyboard focus order.
             # Observe that focus goes onto the same component multiple times.

            h3. Screen Recording
            h3. Actual Results

            The "3M", "1Y", and so on, buttons receives keyboard focus multiple times. This is because the parent <div> elements containing the <button> elements inappropriately use tabindex="0" along with role="menuitem". This may particularly disadvantage keyboard users who often navigate by tabbing through the interactive elements. The focus order may suggest that these component are multiple, separate controls, rather than single components.
            h3. Expected Results
            {noformat}
            Interactive elements must not receive keyboard focus multiple times.
            Make sure that focus only goes onto the interactive elements once. Refactor the components to provide a logical focus order. Avoid nesting interactive items. As well, avoid using tabindex="0" on elements that contain interactive elements.
            In this case, we would recommend you to remove the tabindex="0" and role="menuitem" attributes from the parent <div> elements containing the buttons in the DOM.
            Code Snippet
            <ul>
              <li><button aria-pressed="true">3M</button></li>
              <li><button>1Y</button></li>
              ...
            </ul>{noformat}
            h3. Workaround

            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 Ventura 13.3.1
            Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
            Firefox- Version 92.0 (64-bit)
            Safari- Version 16.4 (18615.1.26.110.1)
            JAWS- Version 2023
            NVDA- Version 2023.3
            Voiceover - Version Latest             		New: h3. Issue Summary

            On the "Accessibility assessment | Roadmaps" page, Focus inappropriately navigates onto the "3M", "1Y", and so on, buttons twice.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "Filter" button and activate it.
             # Using just your keyboard, tab through the above.
             # Observe the keyboard focus order.
             # Observe that focus goes onto the same component multiple times.

            h3. Screen Recording

            [^Screen Recording 2024-02-12 at 11.59.28 AM.mov]
            h3. Actual Results

            The "3M", "1Y", and so on, buttons receives keyboard focus multiple times. This is because the parent <div> elements containing the <button> elements inappropriately use tabindex="0" along with role="menuitem". This may particularly disadvantage keyboard users who often navigate by tabbing through the interactive elements. The focus order may suggest that these component are multiple, separate controls, rather than single components.
            h3. Expected Results
            {noformat}
            Interactive elements must not receive keyboard focus multiple times.
            Make sure that focus only goes onto the interactive elements once. Refactor the components to provide a logical focus order. Avoid nesting interactive items. As well, avoid using tabindex="0" on elements that contain interactive elements.
            In this case, we would recommend you to remove the tabindex="0" and role="menuitem" attributes from the parent <div> elements containing the buttons in the DOM.
            Code Snippet
            <ul>
              <li><button aria-pressed="true">3M</button></li>
              <li><button>1Y</button></li>
              ...
            </ul>{noformat}
            h3. Workaround

            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 Ventura 13.3.1
            Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
            Firefox- Version 92.0 (64-bit)
            Safari- Version 16.4 (18615.1.26.110.1)
            JAWS- Version 2023
            NVDA- Version 2023.3
            Voiceover - Version Latest
            Varsha Bansode made changes -
            Attachment New: Screen Recording 2024-02-12 at 11.59.28 AM.mov [ 451956 ]

              Unassigned Unassigned
              773dd3a38dd5 Cynthia Singh
              Affected customers:
              0 This affects my team
              Watchers:
              1 Start watching this issue

                Created:
                Updated: