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

Accessibility Assessment | Dependencies Report : Elements are nested inappropriately

    XMLWordPrintable

Details

    Description

      Issue Summary

      The “SCRUM-5” link, "More actions for SCRUM-5" button, and so on content are inappropriately nested within the <div> element which contains the role="button".

      Steps to Reproduce

      1. Open the "Accessibility Assessment | Dependencies Report" page.
      2. Navigate to the mentioned instance.
      3. Inspect the code.
      4. Observe that the mentioned content is inappropriately nested within the <div> element having role="button".

      Screenshot

      Actual Results

      The “SCRUM-5” link, "More actions for SCRUM-5" button, and so on content are inappropriately nested within the <div> element that has role="button" and tabindex=”0” attributes. As a result, both these elements receive focus together when read with a screen reader virtual cursor. This might disadvantage the users of a screen reader. That two interactive elements are nested together may confuse or mislead them.

      Expected Results

      Elements must be nested as per the HTML specifications. As these are two separate interactive elements, we would recommend you to move the mentioned interactive elements and content out of the <div> element in the DOM.

      NOTE: Before implementing the accessible name, please connect or take suggestions from the content team.

      Code Snippet

      <div class="_1IqkJ">
      <div class="_3jR8i" role="button"  tabindex="0" data-testid="portfolio-3-portfolio.app-simple-plans.main.tabs.dependencies.issue-card-SCEN-94a29408-0fe2-465a-ba6d-46b8c31fcc35" style="top: 179.5px; left: 22.5px; width: 295px; height: 105px; background-color: rgb(255, 255, 255); border-color: rgb(223, 225, 230); border-width: 1px; cursor: pointer;" aria-label=" Drag Issue - SCRUM" ></div>
      <div class="_2ljhw">
      <div class="_1V5S5" style="background-image: url(&quot;/images/icons/issuetypes/epic.svg&quot;);"></div>
      <div class="wAKNr">
      <a href="/browse/SCRUM" target="_blank" rel="noopener noreferrer">SCRUM</a>
      </div></div>
      (...)
      </div> 

      Workaround

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

      Environment

      MacBook Pro (13-inch, 2018)
      macOs Ventura 13.3.1
      Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2022
      NVDA- Version 2021.2
      Voiceover - Version Latest

      Attachments

        Activity

          People

            Unassigned Unassigned
            2b8a2d42df1b Yash Pawar
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated: