refactor: derive INTERACTIVE_ROLES from aria-query taxonomy (+ widen menu-pattern exception)

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

@@ -1,7 +1,6 @@
 'use strict';
 
 const { isNativeElement } = require('../utils/is-native-element');
-const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
 
 function hasAttr(node, name) {
@@ -78,6 +77,20 @@
     const ignoreTabindex = options.ignoreTabindex || false;
     const ignoreUsemap = options.ignoreUsemap || false;
 
+    const NATIVE_INTERACTIVE_ELEMENTS = new Set([
+      'button',
+      'canvas',
+      'details',
+      'embed',
+      'iframe',
+      'input',
+      'label',
+      'select',
+      'summary',
+      'textarea',
+    ]);
+
+    // eslint-disable-next-line complexity
     function isInteractive(node) {
       const tag = node.tag?.toLowerCase();
       if (!tag) {
@@ -91,7 +104,7 @@
       // HTML §3.2.5.2.7 interactive content (authoritative for content-model;
       // handles label/button/etc. + conditional a[href], input[!hidden],
       // img[usemap], audio/video[controls]).
       if (isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap })) {
         return true;
       }
 

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

@@ -1,6 +1,3 @@
-'use strict';
-
-const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 const { INTERACTIVE_ROLES, COMPOSITE_WIDGET_CHILDREN } = require('../utils/interactive-roles');
 
 function hasAttr(node, name) {
@@ -15,15 +12,17 @@ function getTextAttr(node, name) {
   return undefined;
 }
 
+// Menu submenu pattern — per WAI-ARIA APG, a `menuitem` may own a nested
+// `menu` (APG convention: such menuitems are also marked with
+// `aria-haspopup`, but this rule does not require the attribute before
+// allowing the nesting). 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');
 }
 
-// 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;
@@ -39,33 +38,31 @@ function isCompositeWidgetPattern(parentRole, childRole) {
   return false;
 }
 
-function isMenuItemNode(node) {
-  // Match all three menu-item role variants per ARIA taxonomy. `menuitem`,
-  // `menuitemcheckbox`, and `menuitemradio` are all "menu items" — they can
-  // carry submenus (via MENUITEM_ROLES in isCompositeWidgetPattern) and nest
-  // each other (via the nested-menuitem compat exception). Keeping both
-  // predicates symmetric avoids false positives on APG Menu Button /
-  // Menubar patterns that mix the variants.
-  return MENUITEM_ROLES.has(getTextAttr(node, 'role'));
+function isSummaryFirstChildOfDetails(summaryNode, parentEntry) {
+  if (summaryNode.tag !== 'summary' || parentEntry.tag !== 'details') {
+    return false;
+  }
+  const parentNode = parentEntry.node;
+  const children = parentNode.children || [];
+  const firstNonWhitespace = children.find((child) => {
+    if (child.type === 'GlimmerTextNode') {
+      return child.chars.trim().length > 0;
+    }
+    return true;
+  });
+  return firstNonWhitespace === summaryNode;
 }
 
 function isAllowedDetailsChild(childNode, parentEntry) {
   if (parentEntry.tag !== 'details') {
     return false;
   }
   // Non-<summary> children are flow content in the disclosed panel — allowed.
-  // <summary> is only allowed as the first non-whitespace child of <details>.
   if (childNode.tag !== 'summary') {
     return true;
   }
-  const children = parentEntry.node.children || [];
-  const firstNonWhitespace = children.find((child) => {
-    if (child.type === 'GlimmerTextNode') {
-      return child.chars.trim().length > 0;
-    }
-    return true;
-  });
-  return firstNonWhitespace === childNode;
+  // <summary> is only allowed as the first non-whitespace child of <details>.
+  return isSummaryFirstChildOfDetails(childNode, parentEntry);
 }
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -227,19 +224,15 @@ module.exports = {
             }
             parentEntry.interactiveChildCount++;
           } else if (isAllowedDetailsChild(node, parentEntry)) {
-            // flow content in the disclosed panel, or <summary> as first child
+            // Non-<summary> children are body content; <summary> allowed only as first child
           } 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 menu-item nodes (any combination of menuitem /
-            // menuitemcheckbox / menuitemradio) are valid — menu/sub-menu
-            // pattern per WAI-ARIA APG. Kept for historical compat since
-            // aria-query doesn't encode this via requiredOwnedElements.
+            // 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,5 +1,3 @@
-'use strict';
-
 const { roles } = require('aria-query');
 
 // Interactive ARIA roles — concrete roles whose taxonomy descends from `widget`

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

@@ -66,10 +66,8 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     // <summary> is natively interactive
     '<template><summary onclick={{this.toggle}}>Details</summary></template>',
 
-    // 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.
+    // ARIA widget roles: scrollbar, treeitem
+    // (tooltip is not a widget per WAI-ARIA 1.2 §5.3.3 — document-structure role)
     '<template><div role="scrollbar" onclick={{this.scroll}}>Scroll</div></template>',
     '<template><div role="treeitem" onclick={{this.select}}>Node</div></template>',
 
@@ -219,8 +217,9 @@ 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.
+      // `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,

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

@@ -123,6 +123,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: [
@@ -354,9 +366,16 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       code: '<button><img usemap=""></button>',
       options: [{ ignoreUsemapAttribute: true }],
     },
-    // <audio>/<video> without `controls` are NOT interactive.
-    '<button><audio></audio></button>',
-    '<button><video></video></button>',
+
+    // 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: [
     {