From a3ac0797381801960566630701bc3f08bc79d828 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Mon, 20 Apr 2026 23:08:55 +0200
Subject: [PATCH] fix(template-no-nested-interactive): allow flow content in
 <details> disclosure panel

---
 lib/rules/template-no-nested-interactive.js    | 18 +++++++++++-------
 .../rules/template-no-nested-interactive.js    |  4 ++++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index e04acd9c99..a7591c64cf 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -45,19 +45,23 @@ function isMenuItemNode(node) {
   return getTextAttr(node, 'role') === 'menuitem';
 }
 
-function isSummaryFirstChildOfDetails(summaryNode, parentEntry) {
-  if (summaryNode.tag !== 'summary' || parentEntry.tag !== 'details') {
+function isAllowedDetailsChild(childNode, parentEntry) {
+  if (parentEntry.tag !== 'details') {
     return false;
   }
-  const parentNode = parentEntry.node;
-  const children = parentNode.children || [];
+  // 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 === summaryNode;
+  return firstNonWhitespace === childNode;
 }
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -208,8 +212,8 @@ module.exports = {
               });
             }
             parentEntry.interactiveChildCount++;
-          } else if (isSummaryFirstChildOfDetails(node, parentEntry)) {
-            // <summary> as first non-whitespace child of <details> is allowed
+          } else if (isAllowedDetailsChild(node, parentEntry)) {
+            // flow content in the disclosed panel, or <summary> as first child
           } else if (isMenuItemNode(parentEntry.node) && isMenuItemNode(node)) {
             // Nested menuitem nodes are valid (menu/sub-menu pattern)
           } else {
diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 2d16a097be..264b65b29c 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -61,6 +61,8 @@ ruleTester.run('template-no-nested-interactive', rule, {
     },
     '<template><details><summary>Details</summary>Something small enough to escape casual notice.</details></template>',
     '<template><details> <summary>Details</summary>Something small enough to escape casual notice.</details></template>',
+    '<template><details><summary>Advanced</summary><label for="x">Field</label><input id="x" /></details></template>',
+    '<template><details><summary>More</summary><div><button type="button">Action</button></div></details></template>',
     `<template>
     <ul role="menubar" aria-label="functions" id="appmenu">
       <li role="menuitem" aria-haspopup="true">
@@ -249,6 +251,8 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
     '<label><input></label>',
     '<details><summary>Details</summary>Something small enough to escape casual notice.</details>',
     '<details> <summary>Details</summary>Something small enough to escape casual notice.</details>',
+    '<details><summary>Advanced</summary><label for="x">Field</label><input id="x" /></details>',
+    '<details><summary>More</summary><div><button type="button">Action</button></div></details>',
     `
     <ul role="menubar" aria-label="functions" id="appmenu">
       <li role="menuitem" aria-haspopup="true">