File tree

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-file-tree label="Project files">
  <ul>
    <li data-open>kit
      <ul>
        <li>brain<ul><li>rules.md</li></ul></li>
        <li data-open>parts
          <ul>
            <li data-meta="6 KB">calendar.css</li>
            <li data-meta="15 KB" aria-selected="true">calendar.mjs</li>
          </ul>
        </li>
        <li data-meta="96 KB">kit.css</li>
      </ul>
    </li>
    <li data-meta="2 KB">README.md</li>
  </ul>
</tui-file-tree>

import '/kit/kit.mjs';   // defines <tui-file-tree>

const tree = document.querySelector('tui-file-tree');
tree.addEventListener('change', () => open(tree.value));   // "kit/parts/calendar.mjs"

Needs kit.css and kit.mjs. How to install the kit.

• 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.

A custom element that reads a nested list and writes the tree roles into it, wrapping each name in a row with a printed chevron, a folder or page mark (SVG masks in currentColor, so they print in either finish), the meta and a lamp. The guides are two hairlines per item (a vertical run on its ::before that stops at the elbow for the last child, and the elbow on the row’s ::before), so they follow the tree as it opens and closes with no drawing code. The chevron turns 90° over 120ms; nothing else moves.