Use semantic ul/li elements in file tree browser
Summary
The file tree browser currently uses a div container with role="tree" and individual file-row components with role="treeitem". For better semantic HTML, we should refactor this to use native ul and li elements with proper ARIA attributes.
Context
This was identified during the review of !207844 (merged) where we replaced RecycleScroller with a standard scroller. The W3C Tree View pattern uses ul and li elements for the tree structure.
Proposal
Refactor the tree list structure to use:
- Nested
ulelements for hierarchy (directory/subdirectory/etc.) -
lielements for each tree item - Maintain existing ARIA attributes (
role="tree",role="treeitem", etc.)
Benefits
- More semantic HTML structure
- Better accessibility for screen readers
- Follows W3C best practices for tree view patterns
Implementation Notes
This will require a larger refactor as we'll need to handle nested ul elements for the directory hierarchy. The current flat list structure will need to be adapted to support proper nesting.
Related
- !207844 (merged) - Replace RecycleScroller with standard scroller
- #541107 - Navigate repository with file tree browser
- &17973 - [Post-Rollout] Navigate repo with a file tree
Edited by Jacques Erasmus