Skip to content

Improve tabbing order for commit list items accessibility

Problem

As discussed in #556950 (closed), the current tabbing order for commit list items doesn't match the visual order, particularly in mobile layout. This creates a confusing experience for keyboard users.

From @psjakubowska's feedback:

I'm not so sure about the tabbing order in the mobile layout. For keyboard sighted users it does seem a bit off. Maybe because the commit message looks like a header and then I expect to go to the overflow menu and expand first, not the rest of the details.

Proposed Solution

Match the DOM order with visual order by adjusting the tabbing sequence to:

  1. Header (commit message)
  2. Author + timeago info
  3. Expand button
  4. Badges
  5. Overflow button

Open Questions

  • What should happen to focus management once the description is expanded?
  • How do users navigate back to badges and overflow menu after expanding?
  • Should we consider different behavior for mobile vs desktop layouts?

Acceptance Criteria

  • Tabbing order matches visual order for commit list items
  • Focus management works correctly when expanding/collapsing commit details
  • Solution works consistently across mobile and desktop layouts
  • Changes are tested with keyboard navigation and screen readers

Related Issues

Edited by 🤖 GitLab Bot 🤖