Improve commit list item accessibility
What does this MR do and why?
This MR is part of bigger effort to refactor commit list. Specifically, this improves commit list item accessibility:
- Implement proper heading structure
- Add accessible label for expand-collapse button
- Move anchor id to expandable section and thus links the expand/collapse button to expandable section for assistive technology
- Add mobile version of badges with correct visual order, instead of relying on
flex-direction: row-reverse
- Improve accessible label for copy commit button
- Wrap instead of truncate when user name is long
- Add tooltip for truncated commit titles
Resolves #569049 (closed)
References
Screenshots or screen recordings
Before | After | |
---|---|---|
Wide | ||
Narrow Note: this MR updates to transition into this layout at |
||
Screen reader test (Voiceover + Chrome) |
How to set up and validate locally
- Enable
project_commits_refactor
FF - Open a project
- Code > Commits
- Start a screen reader of your choosing:
- VoiceOver + Safari on MacOS
- NVDA + Chrome|Firefox on Win11
- JAWS + Chrome on Win11
- Tab through the commit list item
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Edited by Chaoyue Zhao