fix: widen composite-widget nesting exception for canonical ARIA patterns

Deriving INTERACTIVE_ROLES from aria-query's widget taxonomy added roles
(`listbox`, `tablist`, `tree`, `treegrid`, `grid`, `radiogroup`, `row`,
and their children) to `template-no-nested-interactive`'s interactive
set. Without a corresponding exception, canonical WAI-ARIA APG composite
widgets would trip the rule:

    <div role="listbox"><div role="option">A</div></div>
    <div role="tablist"><div role="tab">…</div></div>
    <div role="tree"><div role="treeitem">…</div></div>
    <div role="grid"><div role="row"><div role="gridcell">…</div></div></div>
    <div role="radiogroup"><div role="radio">…</div></div>

Widen the existing menu-pattern exception into a general composite-widget
exception driven by aria-query's `requiredOwnedElements` data. For each
parent role, inherit `requiredOwnedElements` from ancestor roles in
`superClass` (so `treegrid` picks up both `row` via `grid` and `treeitem`
via `tree`) and close transitively over intermediate composite roles (so
`grid → row → gridcell` is allowed at arbitrary depth in the hierarchy).
The submenu pattern `menuitem → menu`, which aria-query does not express
via `requiredOwnedElements`, is kept as an explicit special case.

Also add an invalid-interactive test for `role="tooltip"` — now that
tooltip is no longer in INTERACTIVE_ROLES (per WAI-ARIA 1.2 §5.3.3, it
is a Document Structure role), a click handler on a tooltip is an
invalid interactive handler on a non-interactive element.

Author: johanrd

lib/rules/template-no-nested-interactive.js

@@ -1,4 +1,4 @@
-const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
+const { INTERACTIVE_ROLES, COMPOSITE_WIDGET_CHILDREN } = require('../utils/interactive-roles');
 
 const NATIVE_INTERACTIVE_ELEMENTS = new Set([
   'button',
@@ -24,19 +24,28 @@ function getTextAttr(node, name) {
   return undefined;
 }
 
-const MENU_CONTAINER_ROLES = new Set(['menu', 'menubar', 'menuitem']);
-const MENU_ITEM_ROLES = new Set(['menuitem', 'menuitemcheckbox', 'menuitemradio']);
+// Menu submenu pattern — per WAI-ARIA APG, a `menuitem` with `aria-haspopup`
+// may own a nested `menu`. aria-query's `requiredOwnedElements` does not
+// express this "menu-inside-menuitem" direction, so it is handled explicitly.
+const MENUITEM_ROLES = new Set(['menuitem', 'menuitemcheckbox', 'menuitemradio']);
 
 function getRole(node) {
   return getTextAttr(node, 'role');
 }
 
-function isMenuContainer(node) {
-  return MENU_CONTAINER_ROLES.has(getRole(node));
-}
-
-function isMenuItem(node) {
-  return MENU_ITEM_ROLES.has(getRole(node));
+function isCompositeWidgetPattern(parentRole, childRole) {
+  if (!parentRole || !childRole) {
+    return false;
+  }
+  const allowedChildren = COMPOSITE_WIDGET_CHILDREN.get(parentRole);
+  if (allowedChildren && allowedChildren.has(childRole)) {
+    return true;
+  }
+  // Submenu: <… role="menuitem"><… role="menu"> …
+  if (MENUITEM_ROLES.has(parentRole) && childRole === 'menu') {
+    return true;
+  }
+  return false;
 }
 
 function isAllowedDetailsChild(childNode, parentEntry) {
@@ -208,13 +217,14 @@ module.exports = {
             parentEntry.interactiveChildCount++;
           } else if (isSummaryFirstChildOfDetails(node, parentEntry)) {
             // <summary> as first non-whitespace child of <details> is allowed
-          } else if (
-            isMenuContainer(parentEntry.node) &&
-            (isMenuItem(node) || getRole(node) === 'menu')
-          ) {
-            // Menu patterns — menuitem / menuitemcheckbox / menuitemradio
-            // inside menu / menubar / menuitem, or menu inside menuitem (for
-            // submenus), is the standard WAI-ARIA menu hierarchy.
+          } else if (isCompositeWidgetPattern(getRole(parentEntry.node), getRole(node))) {
+            // Canonical ARIA composite-widget hierarchies — e.g. option inside
+            // listbox, tab inside tablist, treeitem inside tree, row inside
+            // grid/treegrid, gridcell/columnheader/rowheader inside row,
+            // menuitem inside menu/menubar, radio inside radiogroup, and
+            // menu inside menuitem (submenu). Derived from aria-query's
+            // `requiredOwnedElements` (+ superClass inheritance for
+            // treegrid, etc.). See lib/utils/interactive-roles.js.
           } else {
             context.report({
               node,

lib/utils/interactive-roles.js

@@ -1,21 +1,32 @@
 const { roles } = require('aria-query');
 
 // Interactive ARIA roles — concrete roles whose taxonomy descends from `widget`
-// in aria-query. This is the same derivation jsx-a11y and lit-a11y use (they
-// define the canonical peer-plugin behavior here):
+// in aria-query. This is the same derivation jsx-a11y uses (the canonical
+// peer-plugin behavior here):
 //   https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/util/isInteractiveRole.js
-//   https://github.com/open-wc/open-wc/blob/main/packages/eslint-plugin-lit-a11y/lib/utils/isInteractiveElement.js
 //
 // `toolbar` is added explicitly — it does not descend from `widget` per
 // aria-query's taxonomy, but supports `aria-activedescendant` and is widget-
-// like in practice. jsx-a11y and lit-a11y add it for the same reason.
+// like in practice. jsx-a11y adds it for the same reason.
 //
 // `tooltip` is intentionally NOT added. Per WAI-ARIA 1.2 §5.3.3 — Document
 // Structure Roles (https://www.w3.org/TR/wai-aria-1.2/#tooltip), tooltip is
 // a document-structure role, not a widget; the spec says "document structures
-// are not usually interactive." jsx-a11y and lit-a11y agree.
+// are not usually interactive." jsx-a11y agrees.
 module.exports.INTERACTIVE_ROLES = buildInteractiveRoleSet();
 
+// Composite-widget child map — for each composite-widget parent role, the
+// set of child roles that are legitimately nested inside it per ARIA's
+// "Required Owned Elements" (aria-query's `requiredOwnedElements`). Closed
+// transitively over chains of composite widgets (e.g. `grid` owns `row`,
+// `row` owns `gridcell` / `columnheader` / `rowheader`, so `grid` transitively
+// allows all of them).
+//
+// This drives the nested-interactive exception so canonical composite-widget
+// patterns (`listbox > option`, `tablist > tab`, `tree > treeitem`,
+// `grid > row > gridcell`, `radiogroup > radio`, etc.) are not flagged.
+module.exports.COMPOSITE_WIDGET_CHILDREN = buildCompositeWidgetChildren();
+
 function buildInteractiveRoleSet() {
   const result = new Set(['toolbar']);
   for (const [role, def] of roles) {
@@ -29,3 +40,77 @@ function buildInteractiveRoleSet() {
   }
   return result;
 }
+
+function buildCompositeWidgetChildren() {
+  // Collect each role's own `requiredOwnedElements` first.
+  const own = new Map();
+  for (const [role, def] of roles) {
+    if (def.abstract) {
+      continue;
+    }
+    const owned = def.requiredOwnedElements;
+    if (!owned || owned.length === 0) {
+      continue;
+    }
+    const kids = new Set();
+    for (const chain of owned) {
+      for (const child of chain) {
+        kids.add(child);
+      }
+    }
+    own.set(role, kids);
+  }
+
+  // A role also legitimately owns whatever its ancestor roles in `superClass`
+  // own. This lets e.g. `treegrid` (superClass chains include `grid` and
+  // `tree`) inherit `row` from `grid` and `treeitem` from `tree`, matching
+  // the APG treegrid pattern.
+  const direct = new Map();
+  for (const [role, def] of roles) {
+    if (def.abstract) {
+      continue;
+    }
+    const merged = new Set(own.get(role) || []);
+    for (const chain of def.superClass || []) {
+      for (const ancestor of chain) {
+        const inherited = own.get(ancestor);
+        if (inherited) {
+          for (const child of inherited) {
+            merged.add(child);
+          }
+        }
+      }
+    }
+    if (merged.size > 0) {
+      direct.set(role, merged);
+    }
+  }
+
+  // Transitive closure: parent -> all roles reachable through owned-element chains.
+  const closed = new Map();
+  function expand(role, visited) {
+    if (closed.has(role)) {
+      return closed.get(role);
+    }
+    const out = new Set();
+    const kids = direct.get(role);
+    if (!kids) {
+      return out;
+    }
+    for (const child of kids) {
+      out.add(child);
+      if (!visited.has(child)) {
+        visited.add(child);
+        for (const grandchild of expand(child, visited)) {
+          out.add(grandchild);
+        }
+      }
+    }
+    closed.set(role, out);
+    return out;
+  }
+  for (const role of direct.keys()) {
+    expand(role, new Set([role]));
+  }
+  return closed;
+}

tests/lib/rules/template-no-invalid-interactive.js

@@ -212,5 +212,19 @@ ruleTester.run('template-no-invalid-interactive', rule, {
         },
       ],
     },
+    {
+      // `tooltip` is a Document Structure role per WAI-ARIA 1.2 §5.3.3, not a
+      // widget. Click handlers on a tooltip are therefore an invalid
+      // interactive handler on a non-interactive element.
+      filename: 'test.gjs',
+      code: '<template><div role="tooltip" onclick={{this.show}}>Tip</div></template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noInvalidInteractive',
+          data: { tagName: 'div', handler: 'onclick' },
+        },
+      ],
+    },
   ],
 });

tests/lib/rules/template-no-nested-interactive.js

@@ -97,6 +97,18 @@ ruleTester.run('template-no-nested-interactive', rule, {
     {{/if}}
   </label>
     </template>`,
+
+    // Canonical ARIA composite-widget hierarchies — derived from aria-query's
+    // `requiredOwnedElements`. These are standard WAI-ARIA APG patterns and
+    // must not be flagged.
+    '<template><div role="listbox"><div role="option">A</div><div role="option">B</div></div></template>',
+    '<template><div role="tablist"><div role="tab">Tab 1</div><div role="tab">Tab 2</div></div></template>',
+    '<template><div role="tree"><div role="treeitem">Node</div></div></template>',
+    '<template><div role="treegrid"><div role="row"><div role="gridcell">Cell</div></div></div></template>',
+    '<template><div role="grid"><div role="row"><div role="gridcell">Cell</div></div></div></template>',
+    '<template><div role="grid"><div role="row"><div role="rowheader">Header</div></div></div></template>',
+    '<template><div role="grid"><div role="row"><div role="columnheader">Header</div></div></div></template>',
+    '<template><div role="radiogroup"><div role="radio">Opt 1</div></div></template>',
   ],
 
   invalid: [
@@ -307,6 +319,16 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       code: '<button><img usemap=""></button>',
       options: [{ ignoreUsemapAttribute: true }],
     },
+
+    // Canonical ARIA composite-widget hierarchies.
+    '<div role="listbox"><div role="option">A</div><div role="option">B</div></div>',
+    '<div role="tablist"><div role="tab">Tab 1</div><div role="tab">Tab 2</div></div>',
+    '<div role="tree"><div role="treeitem">Node</div></div>',
+    '<div role="treegrid"><div role="row"><div role="gridcell">Cell</div></div></div>',
+    '<div role="grid"><div role="row"><div role="gridcell">Cell</div></div></div>',
+    '<div role="grid"><div role="row"><div role="rowheader">Header</div></div></div>',
+    '<div role="grid"><div role="row"><div role="columnheader">Header</div></div></div>',
+    '<div role="radiogroup"><div role="radio">Opt 1</div></div>',
   ],
   invalid: [
     {