File Explorer III

Requirements

• Every visible node must be a direct child of the named role=tree container. Do not nest DOM rows or groups. Derive rows recursively from the supplied data; keep depth, parent, full path and original sibling metadata.
• Use treeitem roles and explicit one-based aria-level, aria-posinset and aria-setsize based on data siblings, not visible neighbors. Only folders expose aria-expanded; files expose aria-selected. Indent using depth.
• Initially all folders are closed. Preserve descendant expansion on ancestor collapse. File activation selects its full path; folder activation toggles expansion.
• Use one tab stop, initially src. Up/Down navigate visible rows without wrapping; Home/End jump to endpoints. Right opens a closed folder or moves to the first visible child of an open folder. Left closes an open folder or moves to its parent. Enter/Space activate. Prevent defaults for handled keys and move actual DOM focus after rendering.
• Keep data-node identifiers and IDs. CSS for basic rows is supplied. Type-ahead, multiselect and filesystem editing are not required.

Examples

Input: Expand src and components
Output: Every visible row stays a direct child of the tree; Button.js has aria-level 3.

Input: Press Right twice on closed src
Output: Open the folder, then move focus to App.js.