@adia-ai/web-components 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.2] — 2026-06-01
+
+### Fixed
+
+- **template engine — ARIA-transparent `display:contents` wrapper spans (FB-94)** — the interpolation wrapper span the engine emits for `${…}` parts (`.map()` / conditional / `repeat()`) now carries `role="presentation"`. `display:contents` removes the span's box from layout but it still generated a generic accessibility node, which broke `aria-required-children` / `aria-required-parent` when the span sat between a role-bearing parent and role-bearing children rendered via interpolation — e.g. a `.map()`-rendered `<tree-ui>` (the mainstream consumer case) tripped axe `aria-required-children` even after the FB-91 static-markup fix landed. `role="presentation"` promotes the children to the real parent in the a11y tree. Fixed at all three wrapper sites (`wrap()` + array branch + keyed `repeat()`); +3 regression tests assert the wrappers carry `role="presentation"`. This is the consumer-preferred + peer-recommended central fix and is structurally sound (the spurious generic node between `tree`→`treeitem` is removed). **Honest verification note:** `aria-required-children` could not be made to fire on any in-repo tree (shallow *or* deeply-nested, axe-core, `:5300`) — it triggers only on color-app's exact published-package `dts-token-tree` — so local axe reads 0 both before and after; the firing→cleared transition is **pending the consumer's confirmation** on their next `@adia-ai/web-components` upgrade. (Tokens Studio / color-app FB-94)
+- **`<menu-item-ui>` no longer an orphan `menuitem` when the menu is closed (FB-95)** — `UIMenuItem.connected()` set `role="menuitem"` unconditionally, but a closed `<menu-ui>` moves its items back into its own light DOM (no `role="menu"` ancestor), so every closed declarative menu tripped axe `aria-required-parent`. The role (+ `tabindex="-1"`) is now applied only when the item has a `role="menu"`/`menubar` ancestor; the open popover adopts items via `appendChild` (which re-fires `connected()`), so the role re-applies on open and drops on close. **Verified with axe-core**: closed menu → **0** `aria-required-parent` violations (was 3); open menu → items are `role="menuitem"`, 0 violations. (Tokens Studio / color-app FB-95)
+
+### Changed — styles + build
+
+- **Tokens cascade-layer completed (`styles/`)** — `typography.css` (`type/scale.css`) + `roles.css` `:root` role-token blocks moved into `@layer(tokens)`, finishing the `@layer` migration's tokens cut (the type-scale + role tokens had stayed unlayered). Behavior-neutral — the `[variant]`/state rules keep their existing precedence; only the base `:root` token declarations join the layer.
+- **`dist/` CDN bundles regenerated** (`web-components.min.css` + `web-components.min.js`) for the template-engine + tokens-layer changes.
+
 ## [0.7.1] — 2026-05-31
 
 ### Fixed

package/components/menu/menu.class.js

@@ -266,8 +266,20 @@ export class UIMenuItem extends UIElement {
   static template = () => null;
 
   connected() {
-    this.setAttribute('role', 'menuitem');
-    if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '-1');
+    // role="menuitem" ONLY when actually inside a menu container. A menu-ui
+    // closes by moving its items back into its own light DOM (see #hide()),
+    // where there is no role="menu"/menubar ancestor — a bare role="menuitem"
+    // there trips axe `aria-required-parent` on every closed menu (FB-95). The
+    // open popover (role="menu") adopts items via appendChild, which re-fires
+    // connected(), so the role re-applies when the menu opens and is dropped
+    // again on close.
+    if (this.closest('[role="menu"], [role="menubar"]')) {
+      this.setAttribute('role', 'menuitem');
+      if (!this.hasAttribute('tabindex')) this.setAttribute('tabindex', '-1');
+    } else {
+      this.removeAttribute('role');
+      this.removeAttribute('tabindex');
+    }
     this.#stamp();
     this.#syncAria();
   }

package/core/template.js

@@ -430,6 +430,13 @@ function wrap(part) {
   if (part.n.nodeType === 1 && part.n[PART]) return part.n;
   const c = document.createElement('span');
   c.style.display = 'contents';
+  // ARIA-transparent: display:contents removes the box from layout, but the
+  // span still generates a generic accessibility node — which breaks
+  // required-owned / required-parent relationships when it sits between a
+  // role-bearing parent and role-bearing children rendered via interpolation
+  // (tree→treeitem, menu→menuitem via `.map()`/`repeat()`). role="presentation"
+  // promotes the children to the real parent in the a11y tree. (FB-94 / FB-95)
+  c.setAttribute('role', 'presentation');
   c[PART] = true;
   part.n.replaceWith(c);
   part.n = c;
@@ -453,6 +460,7 @@ function applyValue(p, v) {
         if (isResult(item)) {
           const el = document.createElement('span');
           el.style.display = 'contents';
+          el.setAttribute('role', 'presentation'); // ARIA-transparent — see wrap()
           c.appendChild(el);
           stamp(item, el);
         } else {
@@ -526,6 +534,7 @@ export function repeat(items, keyFn, tplFn) {
         } else {
           const el = document.createElement('span');
           el.style.display = 'contents';
+          el.setAttribute('role', 'presentation'); // ARIA-transparent — see wrap()
           stamp(result, el);
           newMap.set(key, el);
         }

package/core/template.test.js

@@ -573,3 +573,39 @@ describe('html template — FB-57 (v0.6.8) nested SVG/MathML template namespace
     expect(p.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
   });
 });
+
+describe('html template — FB-94/FB-95 (v0.7.x) ARIA-transparent wrapper spans', () => {
+  let container;
+  beforeEach(() => { container = document.createElement('div'); document.body.appendChild(container); });
+  afterEach(() => container.remove());
+
+  // The display:contents wrapper span the engine emits for interpolated parts
+  // must carry role="presentation" — display:contents removes the box from
+  // layout but the span still generates a generic a11y node, which breaks
+  // required-owned / required-parent relationships when it sits between a
+  // role-bearing parent and role-bearing children rendered via .map()/repeat()
+  // (tree→treeitem = FB-94, menu→menuitem = FB-95). Verified end-to-end with
+  // axe-core; these lock the substrate behaviour against regression.
+  const isContentsSpan = (s) => /display:\s*contents/.test(s.getAttribute('style') || '');
+
+  it('a `.map()` of templates wraps each item in a role="presentation" display:contents span', () => {
+    stamp(html`<ul>${['a', 'b', 'c'].map((x) => html`<li>${x}</li>`)}</ul>`, container);
+    const spans = [...container.querySelectorAll('span')].filter(isContentsSpan);
+    expect(spans.length).toBeGreaterThan(0);
+    spans.forEach((s) => expect(s.getAttribute('role')).toBe('presentation'));
+  });
+
+  it('a conditional `${cond ? html`` : null}` branch wraps in role="presentation"', () => {
+    stamp(html`<div>${true ? html`<span data-x>hi</span>` : null}</div>`, container);
+    const wrap = [...container.querySelectorAll('div > span')].find(isContentsSpan);
+    expect(wrap).toBeTruthy();
+    expect(wrap.getAttribute('role')).toBe('presentation');
+  });
+
+  it('`repeat()` keyed items wrap in role="presentation"', () => {
+    stamp(html`<ul>${repeat(['a', 'b'], (x) => x, (x) => html`<li>${x}</li>`)}</ul>`, container);
+    const spans = [...container.querySelectorAll('span')].filter(isContentsSpan);
+    expect(spans.length).toBeGreaterThan(0);
+    spans.forEach((s) => expect(s.getAttribute('role')).toBe('presentation'));
+  });
+});