Accessible Tree View Pattern

<!-- Root: role="tree" with an accessible label -->
<ul role="tree" aria-label="Project files">

  <!-- Expandable folder node -->
  <li role="treeitem"
      aria-expanded="true"
      tabindex="0"
      aria-selected="false">
    <span class="tree-node">
      <svg class="tree-expand" aria-hidden="true">...</svg>
      <svg class="tree-icon" aria-hidden="true">...</svg>
      <span class="tree-label">src</span>
    </span>

    <!-- Children wrapped in role="group" -->
    <ul role="group">

      <!-- Nested folder -->
      <li role="treeitem"
          aria-expanded="false"
          tabindex="-1"
          aria-selected="false">
        <span class="tree-node">
          <svg class="tree-expand" aria-hidden="true">...</svg>
          <svg class="tree-icon" aria-hidden="true">...</svg>
          <span class="tree-label">components</span>
        </span>
        <ul role="group">
          <!-- Leaf file node (no aria-expanded) -->
          <li role="treeitem"
              tabindex="-1"
              aria-selected="false">
            <span class="tree-node">
              <svg class="tree-icon" aria-hidden="true">...</svg>
              <span class="tree-label">Button.tsx</span>
            </span>
          </li>
        </ul>
      </li>

      <!-- Leaf file node -->
      <li role="treeitem"
          tabindex="-1"
          aria-selected="false">
        <span class="tree-node">
          <svg class="tree-icon" aria-hidden="true">...</svg>
          <span class="tree-label">index.ts</span>
        </span>
      </li>

    </ul>
  </li>

</ul>

/* Tree container */
[role="tree"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

[role="tree"] ul {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0;
}

/* Hide children of collapsed nodes */
[aria-expanded="false"] > ul {
  display: none;
}

/* Tree node row */
.tree-node {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  user-select: none;
  min-height: 2rem;
}

.tree-node:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Focus indicator on the treeitem, not the span */
[role="treeitem"]:focus {
  outline: none;
}

[role="treeitem"]:focus > .tree-node {
  outline: 2px solid #5b2a86;
  outline-offset: -2px;
  border-radius: 0.25rem;
}

/* Selected state */
[role="treeitem"][aria-selected="true"] > .tree-node {
  background: rgba(59, 130, 246, 0.1);
  color: #5b2a86;
}

/* Expand/collapse chevron */
.tree-expand {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

[aria-expanded="true"] > .tree-node .tree-expand {
  transform: rotate(90deg);
}

/* Icons */
.tree-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.tree-label {
  flex: 1;
}

function initTree(treeEl) {
  // Collect all visible treeitems
  function getVisibleItems() {
    return [...treeEl.querySelectorAll('[role="treeitem"]')]
      .filter(item => {
        // Include if no ancestor treeitem is collapsed
        let parent = item.parentElement.closest('[role="treeitem"]');
        while (parent) {
          if (parent.getAttribute('aria-expanded') === 'false') return false;
          parent = parent.parentElement.closest('[role="treeitem"]');
        }
        return true;
      });
  }

  // Move focus with roving tabindex
  function focusItem(item) {
    const current = treeEl.querySelector('[tabindex="0"]');
    if (current) current.setAttribute('tabindex', '-1');
    item.setAttribute('tabindex', '0');
    item.focus();
  }

  // Select a treeitem
  function selectItem(item) {
    treeEl.querySelectorAll('[aria-selected="true"]')
      .forEach(el => el.setAttribute('aria-selected', 'false'));
    item.setAttribute('aria-selected', 'true');
  }

  treeEl.addEventListener('keydown', (e) => {
    const target = e.target.closest('[role="treeitem"]');
    if (!target) return;

    const items = getVisibleItems();
    const index = items.indexOf(target);

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        if (index < items.length - 1) focusItem(items[index + 1]);
        break;

      case 'ArrowUp':
        e.preventDefault();
        if (index > 0) focusItem(items[index - 1]);
        break;

      case 'ArrowRight':
        e.preventDefault();
        if (target.getAttribute('aria-expanded') === 'false') {
          target.setAttribute('aria-expanded', 'true');
        } else if (target.getAttribute('aria-expanded') === 'true') {
          // Move to first child
          const firstChild = target.querySelector('[role="treeitem"]');
          if (firstChild) focusItem(firstChild);
        }
        break;

      case 'ArrowLeft':
        e.preventDefault();
        if (target.getAttribute('aria-expanded') === 'true') {
          target.setAttribute('aria-expanded', 'false');
        } else {
          // Move to parent treeitem
          const parentItem = target.parentElement.closest('[role="treeitem"]');
          if (parentItem) focusItem(parentItem);
        }
        break;

      case 'Home':
        e.preventDefault();
        focusItem(items[0]);
        break;

      case 'End':
        e.preventDefault();
        focusItem(items[items.length - 1]);
        break;

      case 'Enter':
      case ' ':
        e.preventDefault();
        selectItem(target);
        // Toggle expand/collapse if the item has children
        if (target.hasAttribute('aria-expanded')) {
          const expanded = target.getAttribute('aria-expanded') === 'true';
          target.setAttribute('aria-expanded', String(!expanded));
        }
        break;
    }
  });

  // Click to expand/collapse and select
  treeEl.addEventListener('click', (e) => {
    const item = e.target.closest('[role="treeitem"]');
    if (!item) return;
    focusItem(item);
    selectItem(item);
    if (item.hasAttribute('aria-expanded')) {
      const expanded = item.getAttribute('aria-expanded') === 'true';
      item.setAttribute('aria-expanded', String(!expanded));
    }
  });
}

// Initialize
document.querySelectorAll('[role="tree"]').forEach(initTree);