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
ul
elements for hierarchy (directory/subdirectory/etc.) -
li
elements 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