File tree

Folders and files as a real tree, printed like a wiring diagram: traces with an elbow into every item, chevrons that turn, and the chosen file set in a recess with its lamp lit. Written as a plain nested list.

Click, or Tab in and use the arrows: Right opens, Left closes, Home/End, and type a name to jump. Enter chooses.

• The WAI-ARIA tree view pattern: role="tree", treeitem with aria-level, aria-expanded and aria-selected, nested role="group" lists. The part writes all of it from plain markup.
• One tab stop for the whole tree (roving tabindex); the arrows do the rest. The focus ring draws on the row, not the whole subtree.
• Chosen is the recess and the lamp as well as aria-selected; folders read as expanded or collapsed.
• Icons and chevrons are hidden from screen readers; the name is read once.