Accessibility bugs for tables, the diffs page and pipeline stage indicators

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Summary

There are major problems with GitLab's interface, which makes it practically impossible for screen reader users to perform key tasks, such as code review.

Steps to reproduce

Observed using NVDA with Firefox, but this isn't that relevant in this case.

Example Project

The Gitlab CE source repo

What is the current bug behavior?

1. <div>s are used to create all tabular interface elements, which make it impossible to move across columns, or navigate by row. Notable examples include:

   • The issues and merge request table, See this example from GitLab's CE repo
   • The diffs table is also problematic - even though it is marked as a table, it has display: block set, which removes accessibility semantics in most browsers, which makes it extremely difficult to review code.
   • The CI/CD table

   I have a clientside userscript running to fix some of these issues, without which I won't be able to work, so can provide more info if needed.

2. There is no keyboard accessible way of adding a comment to a specific line on the diff, so I had to resort to removing the CSS that made it only visible on mouse over in my userscript as a temporary workaround at work.

3. Indicators for the status of various pipeline stages in merge requests and the Ci/CD table are not accessible, and are read as "menu button collapsed subMenu", which has no indication of the stage's name as well. When opening the submenu, there is a link to the subitem, e.g "review-docs-deploy-manual", but no indication of its status, which I assume to be there.

Output of checks

This bug happens on GitLab.com