@adia-ai/web-components 0.6.50 → 0.7.1

package/components/tree/tree.class.js

@@ -281,11 +281,28 @@ export class UITreeItem extends UIElement {
   }
 
   connected() {
-    this.setAttribute('role', 'treeitem');
+    // The host is the structural GROUP container; the focusable [slot="row"]
+    // is the treeitem (FEEDBACK-91). The WAI-ARIA tree pattern requires every
+    // treeitem to be contained by a `group` or `tree`. Roling the host as
+    // `group` — rather than wrapping nested children in a new element — keeps
+    // the light-DOM structure intact, so it works for BOTH static markup AND
+    // template-engine `.map()` children (whose display:contents wrappers must
+    // not be re-homed) and sidesteps the parent-before-child upgrade race.
+    // axe-core: `tree` accepts `group` as a required child, `group` has no
+    // required parent, and the row's required `group` parent is the host.
+    this.setAttribute('role', 'group');
 
     if (!this.querySelector(':scope > [slot="row"]')) {
       this.#stamp();
     }
+
+    // Mark the row as the treeitem (whether we stamped it or the consumer
+    // supplied a declarative [slot="row"]) and ensure it stays focusable.
+    const row = this.querySelector(':scope > [slot="row"]');
+    if (row) {
+      row.setAttribute('role', 'treeitem');
+      if (!row.hasAttribute('tabindex')) row.setAttribute('tabindex', '0');
+    }
   }
 
   #stamp() {
@@ -350,12 +367,15 @@ export class UITreeItem extends UIElement {
     // Update depth-based indent
     row.style.paddingInlineStart = `${this.depth * 16 + 4}px`;
 
-    // Update aria
+    // Update aria — expanded/selected belong on the treeitem (the row), not
+    // the host group (FEEDBACK-91).
     if (this.hasChildren) {
-      this.setAttribute('aria-expanded', String(this.open));
+      row.setAttribute('aria-expanded', String(this.open));
     } else {
-      this.removeAttribute('aria-expanded');
+      row.removeAttribute('aria-expanded');
     }
+    if (this.selected) row.setAttribute('aria-selected', 'true');
+    else row.removeAttribute('aria-selected');
 
     // Update text
     const textEl = row.querySelector('[slot="text"]');

package/components/tree/tree.test.js

@@ -7,6 +7,7 @@
  */
 
 import { describe, it, expect, beforeAll, beforeEach, afterEach } from 'vitest';
+import { html, stamp } from '../../core/template.js';
 
 beforeAll(async () => {
   await import('./tree.js');
@@ -153,3 +154,110 @@ describe('<tree-item-ui> caret slot + actions adoption (caret convention + FB-89
     expect(carets[0].getAttribute('name')).toBe('folder');
   });
 });
+
+describe('<tree-item-ui> ARIA tree containment (FEEDBACK-91)', () => {
+  let host;
+  const settle = () => new Promise((r) => setTimeout(r, 30));
+
+  beforeEach(() => {
+    host = document.createElement('div');
+    document.body.appendChild(host);
+  });
+  afterEach(() => host.remove());
+
+  // Mirrors axe-core's `aria-required-parent` check for `treeitem`: walking up
+  // from the treeitem, the first ancestor carrying a *non-generic* role must be
+  // `group` or `tree`. Roleless / presentation / display:contents wrapper spans
+  // are transparent pass-throughs (exactly the consumer's `.map()` case).
+  function requiredParentSatisfied(treeitem, root) {
+    let p = treeitem.parentElement;
+    while (p && p !== root.parentElement) {
+      const role = p.getAttribute('role');
+      if (role === 'group' || role === 'tree') return true;
+      if (role && role !== 'presentation' && role !== 'none') return false;
+      p = p.parentElement;
+    }
+    return false;
+  }
+
+  function buildStaticTree() {
+    const tree = document.createElement('tree-ui');
+    const parent = document.createElement('tree-item-ui');
+    parent.setAttribute('text', 'Colors');
+    parent.setAttribute('open', '');
+    for (const t of ['Neutral', 'Brand']) {
+      const c = document.createElement('tree-item-ui');
+      c.setAttribute('text', t);
+      parent.appendChild(c);
+    }
+    tree.appendChild(parent);
+    host.appendChild(tree);
+    return tree;
+  }
+
+  it('roles the host as group and the [slot="row"] as treeitem', async () => {
+    const tree = buildStaticTree();
+    await settle();
+    expect(tree.getAttribute('role')).toBe('tree');
+    for (const item of tree.querySelectorAll('tree-item-ui')) {
+      expect(item.getAttribute('role')).toBe('group');
+      const row = item.querySelector(':scope > [slot="row"]');
+      expect(row.getAttribute('role')).toBe('treeitem');
+      expect(row.getAttribute('tabindex')).toBe('0');
+    }
+  });
+
+  it('every treeitem row has a group/tree required parent (static markup)', async () => {
+    const tree = buildStaticTree();
+    await settle();
+    const rows = tree.querySelectorAll('[role="treeitem"]');
+    expect(rows.length).toBe(3); // parent + 2 children — was the axe-critical case
+    for (const row of rows) expect(requiredParentSatisfied(row, tree)).toBe(true);
+  });
+
+  it('nested treeitems satisfy required-parent when rendered via the template engine .map() (consumer repro)', async () => {
+    const ITEMS = [{ id: 'neutral', text: 'Neutral' }, { id: 'brand', text: 'Brand' }];
+    stamp(html`
+      <tree-ui>
+        <tree-item-ui text="Colors" open>
+          ${ITEMS.map((i) => html`<tree-item-ui .text=${i.text} .value=${i.id}></tree-item-ui>`)}
+        </tree-item-ui>
+      </tree-ui>
+    `, host);
+    await settle();
+
+    const tree = host.querySelector('tree-ui');
+    const rows = tree.querySelectorAll('[role="treeitem"]');
+    expect(rows.length).toBe(3);
+    for (const row of rows) expect(requiredParentSatisfied(row, tree)).toBe(true);
+
+    // The nested items sit BEHIND the template engine's display:contents wrapper
+    // span — proving the fix works without re-homing engine-owned nodes.
+    const child = tree.querySelector('tree-item-ui[value="neutral"]');
+    expect(child.parentElement.style.display).toBe('contents');
+    expect(child.getAttribute('role')).toBe('group');
+  });
+
+  it('aria-expanded lives on the row (treeitem), not the host group', async () => {
+    const tree = buildStaticTree();
+    await settle();
+    const parent = tree.querySelector('tree-item-ui');
+    const parentRow = parent.querySelector(':scope > [slot="row"]');
+    expect(parentRow.getAttribute('aria-expanded')).toBe('true');
+    expect(parent.hasAttribute('aria-expanded')).toBe(false); // not stranded on the host
+
+    const leaf = tree.querySelectorAll('tree-item-ui')[1]; // a child leaf
+    const leafRow = leaf.querySelector(':scope > [slot="row"]');
+    expect(leafRow.hasAttribute('aria-expanded')).toBe(false); // leaves carry none
+  });
+
+  it('aria-selected reflects onto the selected row only', async () => {
+    const tree = buildStaticTree();
+    await settle();
+    const [parent, neutral] = tree.querySelectorAll('tree-item-ui');
+    tree.select(neutral);
+    await settle();
+    expect(neutral.querySelector(':scope > [slot="row"]').getAttribute('aria-selected')).toBe('true');
+    expect(parent.querySelector(':scope > [slot="row"]').hasAttribute('aria-selected')).toBe(false);
+  });
+});