Details
-
Bug
-
Resolution: Unresolved
-
High
-
None
-
8.18.0
-
Severity 3 - Minor
-
Description
Issue Summary
On "Your Work" page, the "Your Pull Requests" table is marked incorrectly.
Steps to Reproduce
- Open "Your Work" page.
- Navigate through table using screen reader or inspect the code.
- 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:
- Remove colspan="6" attribute from <th> element.
- Define <th> for all columns. Make sure that <th> are not empty.
- Remove empty <td> elements that are used for presentation
- Provide accessible name for table using aria-label="" attribute or <caption> element.
- 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