Improve accessibility of merge request changes page
When having to review a merge request, the "Changes" tab is painful to interact with for screen reader users.
Here are the most critical issues:
- No easy way to jump between files: the title of each file should probably be a header (
<h1>-<h6>
) so that we can use "jump keys" to navigate between them. We can at least use the jump key for checkbox and jump between the "Viewed" checkboxes, but then it is necessary to go back with arrows to read the file title. - Browsing file content is hard: if I use up/down arrow keys to navigate those areas, here is how it look like (list items correspond to speech announcements/Braille display update):
- Add a comment to this line or drag for multiple lines
- btn (indicating an empty button)
- Original line number
- New line number (does not appear if it has not changed)
- Line content
- Add a comment to this line or drag for multiple lines
- btn (indicating an empty button)
- Original line number
- New line number (does not appear if it has not changed)
- Line content
- ...
This makes the process of reading files very slow, and makes it harder to keep track of what is changing because of all the noise. The best way to present this kind of content (as far as I know), is a table, because screen readers have keyboard shortcuts to navigate to previous/next lines while staying on the same column. Note that adding tables would also allow jumping between files because screen readers also provide "jump keys" to go to next/revious table.
- The buttons named with file titles that are just after the "Search files" text field don't do anything when activated (and since there is no way to jump to the first file as said above), having to skip them take time.