Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-19265

Your Work : Table defined incorrectly

    XMLWordPrintable

Details

    Description

      Issue Summary

      On "Your Work" page, the "Your Pull Requests" table is marked incorrectly.

      Steps to Reproduce

      1. Open "Your Work" page.
      2. Navigate through table using screen reader or inspect the code.
      3. Observe that the table defined incorrectly. 

      Screenshot

      Actual Results

       
      The table structure of the data table was found to be inappropriate.
       
      Table has following issues: 

      • Empty table header defined with colspan="6" attribute. 
      • Missing table header for "Pull request", "Conflict", "Comment", "Open task" and so on data cells. 
      • The empty <td> defined after after "Conflict" data cells unnecessarily for presentation purpose. 
      • Missing accessible name for table. 

       
      As a result, screen reader user found it difficult to interpret the table information effectively.

      Expected Results

      The content of the table should be correctly announced with by screen reader for their users. Table has accessible name. Make sure that the column headers are defined. 

      Apply following changes: 

      1. Remove colspan="6" attribute from <th> element. 
      2. Define <th> for all columns. Make sure that <th> are not empty. 
      3. Remove empty <td> elements that are used for presentation 
      4. Provide accessible name for table using aria-label="" attribute or <caption> element. 
      5. Use CSS to maintain the presentation of the page.

      Code Snippet

      <table aria-label="Your Pull Requests">
      <thead>
      <tr>
      <th aria=hidden="true">User</th>
      <th>Pull request</th>
      <th>Conflicts</th>
      <th>Comments</th>
      <th>Open Task</th>
      <th>Reviewer</th>
      <th>Builds</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>
      <img src=".." alt="">
      </td>
      <td>
      <a href="/projects/LANG/repos/angular/pull-requests/1/overview">6.1.x pull request</a>
      ...
      </td>
      <td>
      <span>Conflict</span>
      </td>
      <td>
      <span role="img" aria-label="Comments" ...></span>
      <span>8</span>
      </td>
      <td>
      <span role="img" aria-label="Open Tasks" ...></span>
      <span>4</span>
      </td>
      <td><td>
      <td></td>
      </tr>
      ...
      </tbody>
      </table>

      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 Sonoma Version 14.1
      Chrome - Version 119.0.6045.159 (Official Build) (arm64)
      Firefox- Version 93.0 (32-bit)
      Safari- Version 17.1 (19616.2.9.11.7)
      JAWS- Version 2023
      NVDA- Version 2020.3
      Voiceover - Version Latest

      Attachments

        Activity

          People

            Unassigned Unassigned
            8b74bced7d61 Shruti Chabukswar
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated: