Implement ARIA tree view pattern for repository file tree browser
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Summary
This is part of a bigger effort to implement a file tree browser (FTB) in the repository.
As part of this issue we should implement the ARIA tree view pattern identified in the spike:
Note: Implementing ARIA tree view pattern (#525169 (comment 2447409353)) should be the last step, as components shared between MR diffs tab and repository will need to be assigned correct ARIA roles. Implementing only a part of the pattern is considered accessibility violation, so it's best to first get the final HTML structure and then introduce the pattern.
Tree View pattern
Important
Tree navigation has to follow the Tree View pattern from ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
The most important aspects to keep in mind during implementation:
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)
See details about roles, properties, state and attributes.
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)
See details about keyboard support.
3. Visual Accessibility
- Clear visual distinction between focus and selection states
- Folder and file icons for visual cues
- Proper indentation for visual hierarchy