fix(template-no-nested-interactive): isMenuItemNode matches all three menu-item role variants (Copilot review)

Author: johanrd

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

@@ -38,7 +38,13 @@ function isCompositeWidgetPattern(parentRole, childRole) {
 }
 
 function isMenuItemNode(node) {
-  return getTextAttr(node, 'role') === 'menuitem';
+  // 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 isAllowedDetailsChild(childNode, parentEntry) {
@@ -225,9 +231,10 @@ module.exports = {
             // 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) — kept
-            // for historical compat since aria-query doesn't encode this via
-            // requiredOwnedElements.
+            // 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.
           } else {
             context.report({
               node,

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

@@ -78,6 +78,29 @@ ruleTester.run('template-no-nested-interactive', rule, {
       </li>
     </ul>
     </template>`,
+
+    // Mixed menu-item variants — `menuitemcheckbox` and `menuitemradio`
+    // nested alongside plain `menuitem` follow the same APG Menu Button
+    // pattern. Should not flag as nested-interactive.
+    `<template>
+    <ul role="menu" aria-label="options">
+      <li role="menuitemcheckbox" aria-checked="false">Show hidden</li>
+      <li role="menuitemradio" aria-checked="true">Sort by name</li>
+      <li role="menuitemradio" aria-checked="false">Sort by date</li>
+    </ul>
+    </template>`,
+    // Submenu attached to a menuitemcheckbox (APG permits this).
+    `<template>
+    <ul role="menu">
+      <li role="menuitemcheckbox" aria-haspopup="true" aria-checked="false">
+        Advanced
+        <ul role="menu">
+          <li role="menuitem">Inspect</li>
+          <li role="menuitem">Export</li>
+        </ul>
+      </li>
+    </ul>
+    </template>`,
     `<template>
   <label> My input:
     {{#if @select}}