refactor: consume #27's aria-query-derived INTERACTIVE_ROLES

Import INTERACTIVE_ROLES and COMPOSITE_WIDGET_CHILDREN from the shared
lib/utils/interactive-roles.js util (introduced in #27 — byte-identical
copy here so either PR can land first without conflict). Drop the
hardcoded 19-role set previously duplicated inline in each rule.

Behavior changes:

- ARIA widget role set expands from 19 to 35 roles — picks up
  menubar, menu, listbox, tree, tablist, grid, treegrid, radiogroup,
  alertdialog, progressbar, and other widget-descended roles in
  aria-query's taxonomy that the hardcoded list missed.
- tooltip is no longer treated as interactive. Per WAI-ARIA 1.2 §5.3.3,
  tooltip is a document-structure role, not a widget. #27's util
  reflects this (tooltip explicitly excluded). Old <div role="tooltip"
  onclick> test moves from valid to invalid — spec-correct.
- Composite-widget nesting exception expanded via COMPOSITE_WIDGET_CHILDREN.
  Canonical APG patterns (<ul role="menubar"><li role="menuitem">...,
  <ul role="listbox"><li role="option">..., grid/row/gridcell, treegrid,
  radiogroup/radio) no longer flag as nested-interactive. Previously the
  rule only handled menuitem-in-menuitem explicitly.

Pairs with #37's HTML-content-model authority split to complete the
two-authority architecture: HTML §3.2.5.2.7 via html-interactive-content,
ARIA widget taxonomy via interactive-roles. Each util cites one authority
honestly; rules compose both.

Author: johanrd

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

@@ -1,4 +1,5 @@
 const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
+const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
 
 function hasAttr(node, name) {
   return node.attributes?.some((a) => a.name === name);
@@ -73,28 +74,6 @@ module.exports = {
     const ignoreTabindex = options.ignoreTabindex || false;
     const ignoreUsemap = options.ignoreUsemap || false;
 
-    const INTERACTIVE_ROLES = new Set([
-      'button',
-      'checkbox',
-      'link',
-      'menuitem',
-      'menuitemcheckbox',
-      'menuitemradio',
-      'option',
-      'radio',
-      'scrollbar',
-      'searchbox',
-      'slider',
-      'spinbutton',
-      'switch',
-      'tab',
-      'textbox',
-      'tooltip',
-      'treeitem',
-      'combobox',
-      'gridcell',
-    ]);
-
     function isInteractive(node) {
       const tag = node.tag?.toLowerCase();
       if (!tag) {

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

@@ -1,23 +1,5 @@
 const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
-
-const INTERACTIVE_ROLES = new Set([
-  'button',
-  'checkbox',
-  'link',
-  'searchbox',
-  'spinbutton',
-  'switch',
-  'textbox',
-  'radio',
-  'slider',
-  'tab',
-  'menuitem',
-  'menuitemcheckbox',
-  'menuitemradio',
-  'option',
-  'combobox',
-  'gridcell',
-]);
+const { INTERACTIVE_ROLES, COMPOSITE_WIDGET_CHILDREN } = require('../utils/interactive-roles');
 
 function hasAttr(node, name) {
   return node.attributes?.some((a) => a.name === name);
@@ -31,6 +13,30 @@ function getTextAttr(node, name) {
   return undefined;
 }
 
+function getRole(node) {
+  return getTextAttr(node, 'role');
+}
+
+// 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 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 isMenuItemNode(node) {
   return getTextAttr(node, 'role') === 'menuitem';
 }
@@ -198,8 +204,17 @@ module.exports = {
             parentEntry.interactiveChildCount++;
           } else if (isSummaryFirstChildOfDetails(node, parentEntry)) {
             // <summary> as first non-whitespace child of <details> is allowed
+          } 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,
+            // radio inside radiogroup, menu inside menuitem (submenu).
+            // Derived from aria-query's requiredOwnedElements with superClass
+            // inheritance — see lib/utils/interactive-roles.js.
           } else if (isMenuItemNode(parentEntry.node) && isMenuItemNode(node)) {
-            // Nested menuitem nodes are valid (menu/sub-menu pattern)
+            // Nested menuitem nodes are valid (menu/sub-menu pattern) — kept
+            // for historical compat since aria-query doesn't encode this via
+            // requiredOwnedElements.
           } else {
             context.report({
               node,

lib/utils/interactive-roles.js

@@ -0,0 +1,127 @@
+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 uses (the canonical
+// peer-plugin behavior here):
+//   https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/util/isInteractiveRole.js
+//
+// Authority: aria-query widget taxonomy, one manual addition, one manual
+// exclusion. Both documented below.
+//
+// `toolbar` is added explicitly — it does not descend from `widget` per
+// aria-query's taxonomy (its superClass is structure-based), but supports
+// `aria-activedescendant` and is widget-like in practice per WAI-ARIA APG's
+// toolbar pattern. 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 agrees.
+//
+// `progressbar` IS included (it descends from widget → range per aria-query).
+// lit-a11y explicitly excludes it on the grounds that `progressbar.value` is
+// always readonly, so the role isn't operable by the user. This is a real
+// design disagreement; we side with aria-query's taxonomy (and jsx-a11y) to
+// keep the authority single-sourced. Authors wanting lit-a11y behavior can
+// layer a rule-level exclusion if needed.
+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) {
+    if (def.abstract) {
+      continue;
+    }
+    const descendsFromWidget = (def.superClass || []).some((chain) => chain.includes('widget'));
+    if (descendsFromWidget) {
+      result.add(role);
+    }
+  }
+  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

@@ -66,9 +66,11 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     // <summary> is natively interactive
     '<template><summary onclick={{this.toggle}}>Details</summary></template>',
 
-    // ARIA widget roles: scrollbar, tooltip, treeitem
+    // ARIA widget roles: scrollbar, treeitem (+ many others from the shared
+    // interactive-roles util). tooltip is intentionally NOT in the widget
+    // set (per WAI-ARIA 1.2 §5.3.3 it's a document-structure role) and so
+    // handlers on `role="tooltip"` should be flagged — see invalid cases.
     '<template><div role="scrollbar" onclick={{this.scroll}}>Scroll</div></template>',
-    '<template><div role="tooltip" onclick={{this.show}}>Tip</div></template>',
     '<template><div role="treeitem" onclick={{this.select}}>Node</div></template>',
 
     // audio/video with controls are interactive
@@ -211,5 +213,18 @@ ruleTester.run('template-no-invalid-interactive', rule, {
         },
       ],
     },
+    {
+      // role="tooltip" is document-structure per WAI-ARIA 1.2 §5.3.3 — NOT
+      // a widget, so a handler on it is as invalid as a handler on a bare div.
+      filename: 'test.gjs',
+      code: '<template><div role="tooltip" onclick={{this.show}}>Tip</div></template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noInvalidInteractive',
+          data: { tagName: 'div', handler: 'onclick' },
+        },
+      ],
+    },
   ],
 });