Uploaded image for project: 'Jira Data Center'
  1. Jira Data Center
  2. JRASERVER-76251

Issue statistics : Missing row headers for data table

    XMLWordPrintable

Details

    Description

      Issue Summary

      On the page, the Screen reader doesn't announce row headers for data tables present in the main content area.

      Note: There are multiple issues found on the page with regard to row headers inside the data tables on the page.

      Steps to Reproduce

      1. Open the page.
      2. Navigate to the data tables present in  the main content area.
      3. For instance, Inspect the codes of "Unresolved", "Fixed", "Done" and so on links inside the table.
      4. Observe that the links are marked-up using <td> elements inappropriately.

      Screen Recording

      Screen Recording 2023-09-11 at 11.08.04 AM.mov

      Actual Result

      The links present inside the table such as "Unresolved", "Fixed", "Done" and so on are not programmatically marked-up as row headers. As a result, Screen reader users find it difficult to understand the table structure effectively. 

      Expected Results

      The Row headers and column headers should be identified for the associated data of the table by screen readers for their users.

      Use <th> tags to identify row headers such as "Unresolved", "Fixed", "Done" and so on and also provide "scope" attribute with "row" as a value inside <th> elements.

      To implement this.

      The row and cfolumn headers must be defined using <th> element and also   provide "Scope" attribute with "row" and "col" as a value respectively inside <th> elements.

      The scope attribute tells the browser and screen reader that every thing within column  that is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row

      Generally, all <th> elements should have "scope" attribute. Screen readers will identify whether it is a column or row header.

       

      Code snippet

      <table class="aui">
      (...)
      <th scope="col" id="176214-stats-category" class="cell-type-collapsed">Resolution</th>
      <th scope="col" id="176214-stats-count" class="stats-gadget-numeric">Count</th>
      <th scope="col" id="176214-stats-percentage" colspan="2">Percentage</th>
      (...)
      <tbody><tr>
      <th scope="row" class="cell-type-collapsed" headers="176214-stats-category"><a href="https://jira.atlassian.com/issues/?jql=labels+%3D+ax-customer-escalated+AND+resolution+is+EMPTY">Unresolved</a></th></tr>
      (...)
      <tr>
      <th scope="row"  class="cell-type-collapsed" headers="176214-stats-category"><a href="https://jira.atlassian.com/issues/?jql=labels+%3D+ax-customer-escalated+AND+resolution+%3D+Fixed"title="A fix for this issue is checked into the tree and tested.">Fixed</a></th>
      (...)
      </tr>
      (...)
      </tbody>(...)
      </table>

      Workaround

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

      Environment

      MacBook Pro (14-inch, 2021)
      macOs Ventura 13.5
      Chrome - Version 115.0.5790.114 (Official Build) (x86_64)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 15.3 (17612.4.9.1.5)
      JAWS- Version 2021
      NVDA- Version 2020.3
      Voiceover - Version Latest

      Attachments

        Activity

          People

            67dd240e0477 Andrii Lymych (Inactive)
            71c7b0ef4382 Malleswara Rao Konthala
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: