This is a continuation of the File Explorer exercise. Before attempting this, ensure you have completed the basic File Explorer question.

In a hierarchical tree view, any item may have children, and items with children can be expanded or collapsed. For example, a folder in a file explorer can be expanded to reveal its contents (files or folders).

In the previous exercise, you implemented a functional file explorer. Now, the focus is accessibility. Good UI components should follow ARIA guidelines to ensure screen readers and other assistive technologies interpret the tree view correctly.

Your task is to enhance your previous File Explorer component by adding the correct ARIA roles, states, and properties according to the ARIA Tree View pattern.

Requirements (ARIA Compliance)

Tree container
- The root container must have role="tree".
- It must either have a visible label referenced by aria-labelledby or an aria-label.
Tree nodes
- Each node should have role="treeitem".
- Parent nodes must contain or own an element with role="group" for their children.
- Child nodes are contained in a role="group" element nested under their parent node.
Expanded/collapsed state
- Parent nodes should have aria-expanded="false" when collapsed and aria-expanded="true" when expanded.
- Leaf nodes (files) should not have aria-expanded.
Tree structure metadata
- Each treeitem must specify:
  - aria-level – the depth of the node in the tree.
  - aria-setsize – total number of sibling nodes at that level.
  - aria-posinset – position of the node within its sibling set.