[go: up one dir, main page]

Skip to content

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