Implement ARIA tree view pattern for MR file tree browser
Summary
This issue is a follow-up to the repository file tree browser ARIA implementation in #541107. The MR file tree browser currently has accessibility violations that need to be addressed by implementing the ARIA tree view pattern.
Background
As discussed in #541107, the MR file tree browser shares components with the repository browser but faces additional challenges due to RecycleScroller usage. The repository team is implementing the ARIA tree view pattern first, and this work should be adapted for the MR context.
Current Issues
RecycleScroller DOM Recycling Problems:
- Focus gets lost when elements are recycled or repositioned
- Tab navigation fails when the next focusable element doesn't exist in DOM yet (beyond buffer zone)
- ARIA tree implementation complicated since proper tree navigation requires consistent DOM structure
- Unpredictable focus jumps as browser loses track of which element should have focus
Requirements
Implement the ARIA tree view pattern following the ARIA Authoring Practices Guide.
1. ARIA Compliant
- Proper ARIA roles (
tree,treeitem,group) - Correct ARIA attributes for hierarchy (
aria-level,aria-setsize,aria-posinset) - State management for expanded/collapsed nodes (
aria-expanded) - Selection management (
aria-selected)
2. Full Keyboard Navigation
- Arrow keys to navigate between nodes
- Right/Left to expand/collapse folders
- Home/End to jump to first/last items
- Space to select items
- Enter to activate (expand/collapse or open file)
3. Visual Accessibility
- Clear visual distinction between focus and selection states
- Folder and file icons for visual cues
- Proper indentation for visual hierarchy
Acceptance Criteria
-
ARIA tree view pattern fully implemented for MR file tree -
Full keyboard navigation working correctly -
Automated accessibility tests pass -
No regression in performance for large MR diffs -
Visual accessibility requirements met
Related Issues
Edited by Jacques Erasmus