Issue Summary

The screen reader users are unable to access the "Releases" table.

Steps to Reproduce

1. Open the Homepage of the Jira.
2. Navigate to "Projects" >= open any project.
3. Navigate to the "side navigation" and activate "Releases" link >= opens the "Releases" page.
4. Using a screen reader, navigate to the table present in the main content area and try to navigate to the different rows and columns.
5. Observe that users are unable to access the table.

Screenshot

Screen Recording

Actual Results

When screen reader users navigate to the "Releases" table, it is announced as "Table with 7 columns and 1 rows", even though the table consists of several rows and data. Additionally, when screen reader users try to move to the rows using the screen reader's keystrokes, they are unable to navigate. This occurs because the role="button" is incorrectly specified for the <tr> element. As a result, screen reader users cannot access the table.

Expected Results

Ensure that the screen reader users can access the table.

In this scenario, remove the role="button" from the source of the <tr> element.

Code Snippet:

<table>
  <thead>
    <tr>
      <th><button type="button" aria-roledescription="Sort button">Version</button></th>
      <th>Status</th>
      <th>Progress</th>
      <th><button type="button" aria-roledescription="Sort button">Start date</button></th>
      <th><button type="button" aria-roledescription="Sort button">Release date</button></th>
      <th><button type="button" aria-roledescription="Sort button">Description</button></th>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr tabindex="0" draggable="true">
      <td><a href="/projects/JSC/versions/10015/tab/release-report-all-issues" target="_self">Test Q2</a></td>
      <td><span>RELEASED</span></td>
      <td>No issues</td>
      <td>October 10, 2024</td>
      <td>October 21, 2024</td>
      <td>This is for testing the experience.</td>
      <td>
        <button aria-expanded="false" aria-haspopup="true" type="button">
          <span role="img" aria-label="More"></span>
        </button>
      </td>
    </tr>

(...)
  </tbody>
</table> 

Workaround

We kindly request that you follow the workaround until the issue is resolved. Please navigate to the “Releases” table and click on the “Version” column header to activate the sort button. You should observe that the table is sorted accordingly. Subsequently, utilize the screen reader's table navigation keystrokes to navigate within the table. You can access the table data using this method. This workaround is compatible with all browsers using JAWS, NVDA, and VoiceOver screen readers.

Environment

MacBook Pro (16-inch, 2021)
macOS Sonoma 14.7
Operations - Windows11
Chrome - Version 130.0.6723.59 (Official Build) (64-bit)
Safari- Version 18.0
Firefox- Version 131.0.3 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.3.1
VoiceOver - Version Latest