Drawer index

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

<div class="tui-drawer-index">
  <ul class="tui-drawer-index__cabinet" role="tree" aria-label="Lode repository">
    <li class="tui-drawer-index__drawer" role="treeitem" aria-level="1" aria-expanded="true"
        aria-label="runbooks" tabindex="-1" data-name="runbooks">
      <span class="tui-drawer-index__front">
        <span class="tui-drawer-index__holder">
          <span class="tui-drawer-index__name">runbooks</span>
          <span class="tui-drawer-index__meta">7 files</span>
        </span>
        <span class="tui-drawer-index__pull" aria-hidden="true"></span>
      </span>
      <div class="tui-drawer-index__body">
        <ul class="tui-drawer-index__group" role="group">
          <li class="tui-drawer-index__card" role="treeitem" aria-level="2" aria-selected="true"
              tabindex="0" data-name="canary-rollback.md">
            <span class="tui-drawer-index__name">canary-rollback.md</span>
            <span class="tui-drawer-index__meta">6 KB</span>
          </li>
          <li class="tui-drawer-index__divider" role="treeitem" aria-level="2" aria-expanded="false"
              aria-label="regions" tabindex="-1" data-name="regions" style="--tab:0">…</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

import { drawerIndexHTML } from '/kit/kit.mjs';   // also wires every drawer index on the page

box.innerHTML = drawerIndexHTML([
  { name: 'runbooks', children: [
    { name: 'canary-rollback.md', meta: '6 KB' },
    { name: 'regions', children: [{ name: 'eu-west.md' }, { name: 'us-east.md' }] },
  ] },
  { name: 'releases', children: [{ name: '4.2.md', meta: '9 KB' }] },
], { label: 'Lode repository', chosen: 'runbooks/canary-rollback.md' });

box.addEventListener('tui-open', (e) => {
  e.detail.path;     // 'runbooks/regions/eu-west.md'
  e.detail.folder;   // false for a card, true for a drawer or a divider
});

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

• It is a WAI-ARIA tree: a list with role="tree", every drawer, divider and card a treeitem with its level, and every folder with aria-expanded. One item is in the tab order and the arrow keys move from there.
• The keys are the pattern’s own: Up and Down; Right to open and then go in; Left to close and then go out; Home and End; * for every folder beside this one; and typing to jump to a name.
• A shut drawer is out of reach: its cards are hidden from assistive technology and from Tab, not only slid out of sight.
• A folder is named by its own name, so a screen reader says “runbooks, expanded, level 1”, and not every name inside it.
• The card taken out is aria-selected, and it also stands proud of the rest with its lamp lit. Colour is never the only sign.
• Names and sizes are paper ink on paper, 13:1 and 6:1, in both finishes.
• With reduced motion drawers open and shut at once, with no slide.

The markup is a nested list written by drawerIndexHTML(), roles and all, so it can come from a server and needs only the key and click handling that kit.mjs delegates once for the page. A drawer’s body is a one-row grid that goes from 0fr to 1fr, so it slides open without being measured, and visibility follows it shut so nothing inside can be reached. The cards come forward a few pixels as it opens. Each card is paper with a ruled line, pulled up under the one before it, and throws a short shadow upward onto it; every third card sits a pixel off square. The divider is pressboard, a mix of the paper and its ink, and --tab places its tab at the first, second or third cut along the row, as dividers are cut. The label holder is a paper card behind a pressed frame drawn with spread shadows, and the pull is a hood with its hollow under it. Type-ahead is the file tree’s own fileTreeMatch.