Skip to content

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

CleanShot 2025-10-06 at 21.40.14.png

CleanShot 2025-10-06 at 21.24.16.png

Narrow

Note: this MR updates to transition into this layout at md breakpoint

CleanShot 2025-10-06 at 21.40.47.png

CleanShot 2025-10-06 at 21.24.34.png

Screen reader test

(Voiceover + Chrome)

CleanShot 2025-10-06 at 21.32.33.mp4

How to set up and validate locally

  1. Enable project_commits_refactor FF
  2. Open a project
  3. Code > Commits
  4. Start a screen reader of your choosing:
    • VoiceOver + Safari on MacOS
    • NVDA + Chrome|Firefox on Win11
    • JAWS + Chrome on Win11
  5. 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

Merge request reports

Loading