From 28bfda5339f59876ad2bf29ab53b5102c5736270 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Thu, 30 Apr 2026 17:29:49 +0200
Subject: [PATCH 1/2] feat(template-no-nested-interactive): surface triggering
 attribute in error message
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The error said "Do not nest interactive element <button> inside <div>." which
hides why the rule fired — authors had to inspect the rule source to find
that role/contenteditable/tabindex on the parent or child was the trigger.

Now the message names the disambiguating attribute when the bare tag would
be uninformative:

  Do not nest interactive element <button> inside <div role="menu">.
  Do not nest interactive element <input> inside <div contenteditable>.
  Do not nest interactive element <div tabindex="1"> inside <button>.

Self-explanatory native interactive tags (button, input, a, etc.) keep
their bare-tag form to avoid redundant noise. Applied symmetrically to
both parent and child sides.
---
 lib/rules/template-no-nested-interactive.js   | 55 ++++++++++++++-
 .../rules/template-no-nested-interactive.js   | 69 ++++++++++++++++++-
 2 files changed, 120 insertions(+), 4 deletions(-)

diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index f82bf602d8..2c5360f052 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -49,6 +49,50 @@ function isMenuItemNode(node) {
   return MENUITEM_ROLES.has(getTextAttr(node, 'role'));
 }
 
+// Build the element-description string used in error messages. Surfaces the
+// attribute that *makes* the element interactive when the bare tag would be
+// uninformative — e.g. `<div role="menu">`, `<div contenteditable>`, or
+// `<div tabindex="0">`. For self-explanatory native interactive tags
+// (button, input, a, etc.) the tag alone is returned, since adding the
+// triggering attribute would be redundant noise.
+function describeInteractive(node) {
+  const tag = node.tag;
+
+  const role = getTextAttr(node, 'role');
+  if (role && INTERACTIVE_ROLES.has(role)) {
+    return `${tag} role="${role}"`;
+  }
+
+  if (hasAttr(node, 'contenteditable')) {
+    const ce = getTextAttr(node, 'contenteditable');
+    const normalized = typeof ce === 'string' ? ce.trim().toLowerCase() : ce;
+    if (normalized !== 'false') {
+      // Surface 'plaintext-only' as a distinct spec keyword; collapse the
+      // empty string, 'true', and the bare attribute to a uniform form.
+      if (normalized === 'plaintext-only') {
+        return `${tag} contenteditable="plaintext-only"`;
+      }
+      return `${tag} contenteditable`;
+    }
+  }
+
+  // Tabindex-only interactivity: the tag (typically <div>/<span>) carries no
+  // signal on its own, so surface the tabindex value. Skip for elements that
+  // are already interactive via tag/usemap/canvas — for those the tag itself
+  // is the source of interactivity and the tabindex would be redundant.
+  if (
+    hasAttr(node, 'tabindex') &&
+    !isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap: false }) &&
+    tag !== 'canvas' &&
+    !(tag === 'object' && hasAttr(node, 'usemap'))
+  ) {
+    const tabindex = getTextAttr(node, 'tabindex');
+    return tabindex === undefined ? `${tag} tabindex` : `${tag} tabindex="${tabindex}"`;
+  }
+
+  return tag;
+}
+
 function isAllowedDetailsChild(childNode, parentEntry) {
   if (parentEntry.tag !== 'details') {
     return false;
@@ -222,7 +266,7 @@ module.exports = {
               context.report({
                 node,
                 messageId: 'nested',
-                data: { parent: parentEntry.tag, child: node.tag },
+                data: { parent: parentEntry.describe, child: describeInteractive(node) },
               });
             }
             parentEntry.interactiveChildCount++;
@@ -244,7 +288,7 @@ module.exports = {
             context.report({
               node,
               messageId: 'nested',
-              data: { parent: parentEntry.tag, child: node.tag },
+              data: { parent: parentEntry.describe, child: describeInteractive(node) },
             });
           }
         }
@@ -252,7 +296,12 @@ module.exports = {
         // Push interactive elements to the stack, but tabindex-only elements
         // should not become parent interactive nodes
         if (currentIsInteractive && !isInteractiveOnlyFromTabindex(node)) {
-          interactiveStack.push({ tag: node.tag, node, interactiveChildCount: 0 });
+          interactiveStack.push({
+            tag: node.tag,
+            node,
+            describe: describeInteractive(node),
+            interactiveChildCount: 0,
+          });
         }
       },
 
diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 920fd789f3..18e6039ddc 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -274,6 +274,18 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ messageId: 'nested' }],
     },
+    // Error message surfaces the attribute that makes a <div> parent interactive
+    // (regression test for the original report against `<div role="menu">`).
+    {
+      code: '<template><div role="menu"><input type="search"></div></template>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not nest interactive element <input> inside <div role="menu">.',
+        },
+      ],
+    },
   ],
 });
 
@@ -422,7 +434,9 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
     {
       code: '<button><div tabindex="1"></div></button>',
       output: null,
-      errors: [{ message: 'Do not nest interactive element <div> inside <button>.' }],
+      errors: [
+        { message: 'Do not nest interactive element <div tabindex="1"> inside <button>.' },
+      ],
     },
     {
       code: '<button><img usemap=""></button>',
@@ -466,5 +480,58 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ message: 'Do not nest interactive element <button> inside <canvas>.' }],
     },
+    // Error message surfaces the attribute that makes a <div> parent interactive,
+    // so authors can see *why* the rule fired without inspecting the rule source.
+    {
+      code: '<div role="menu"><input type="search"></div>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not nest interactive element <input> inside <div role="menu">.',
+        },
+      ],
+    },
+    {
+      code: '<div role="menu"><button type="button">Delete</button></div>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not nest interactive element <button> inside <div role="menu">.',
+        },
+      ],
+    },
+    {
+      code: '<div contenteditable><button>Edit</button></div>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not nest interactive element <button> inside <div contenteditable>.',
+        },
+      ],
+    },
+    {
+      code: '<div contenteditable="plaintext-only"><button>Edit</button></div>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not nest interactive element <button> inside <div contenteditable="plaintext-only">.',
+        },
+      ],
+    },
+    // Child-side enrichment: a <div role="button"> child surfaces its role too.
+    {
+      code: '<button><div role="button">Inner</div></button>',
+      output: null,
+      errors: [
+        {
+          message:
+            'Do not nest interactive element <div role="button"> inside <button>.',
+        },
+      ],
+    },
   ],
 });

From 1823fb1405f0e177dd76146e23539108f6e0fbfe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Thu, 30 Apr 2026 18:25:54 +0200
Subject: [PATCH 2/2] fix: prettier formatting

---
 .../rules/template-no-nested-interactive.js   | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 4f61ee5635..8e758866e8 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -293,8 +293,7 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [
         {
-          message:
-            'Do not nest interactive element <input> inside <div role="menu">.',
+          message: 'Do not nest interactive element <input> inside <div role="menu">.',
         },
       ],
     },
@@ -456,9 +455,7 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
     {
       code: '<button><div tabindex="1"></div></button>',
       output: null,
-      errors: [
-        { message: 'Do not nest interactive element <div tabindex="1"> inside <button>.' },
-      ],
+      errors: [{ message: 'Do not nest interactive element <div tabindex="1"> inside <button>.' }],
     },
     {
       code: '<button><img usemap=""></button>',
@@ -509,8 +506,7 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [
         {
-          message:
-            'Do not nest interactive element <input> inside <div role="menu">.',
+          message: 'Do not nest interactive element <input> inside <div role="menu">.',
         },
       ],
     },
@@ -519,8 +515,7 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [
         {
-          message:
-            'Do not nest interactive element <button> inside <div role="menu">.',
+          message: 'Do not nest interactive element <button> inside <div role="menu">.',
         },
       ],
     },
@@ -529,8 +524,7 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [
         {
-          message:
-            'Do not nest interactive element <button> inside <div contenteditable>.',
+          message: 'Do not nest interactive element <button> inside <div contenteditable>.',
         },
       ],
     },
@@ -550,8 +544,7 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [
         {
-          message:
-            'Do not nest interactive element <div role="button"> inside <button>.',
+          message: 'Do not nest interactive element <div role="button"> inside <button>.',
         },
       ],
     },