From be1a15db3b0786be139e569654d086421ee2bcde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Wed, 22 Apr 2026 00:28:57 +0200
Subject: [PATCH 1/9] refactor: reconcile native-interactive-elements via
 shared util
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `lib/utils/native-interactive-elements.js` exporting `isNativeInteractive(node, getTextAttrValue)` — the canonical "is this HTML tag natively interactive?" classifier. Migrates `template-no-invalid-interactive` and `template-no-nested-interactive` to use it.

The set is hand-curated because axobject-query disagrees with browser reality on several rows (notably audio/video unconditional-widget; <menuitem> deprecated-but-still-listed). Each row is documented inline with spec/browser rationale. See the JSDoc in `lib/utils/native-interactive-elements.js` for the full table.

Interactive set:
- `button`, `select`, `textarea`, `iframe`, `embed`, `summary`, `details` — universally accepted widgets (iframe/details deviate from axobject-query's type classification but are focusable in practice).
- `input` — except `type=hidden`.
- `option`, `datalist` — axobject-query widget (ListBoxOptionRole / ListBoxRole).
- `canvas` — axobject-query widget (CanvasRole); convention + no-false-positive bias.
- `a[href]`, `area[href]` — HTML-AAM: anchor interactivity requires href.
- `audio[controls]`, `video[controls]` — stricter than axobject-query (which marks bare audio/video as widget unconditionally); aligns with browser reality.

Not in the interactive set:
- `input[type=hidden]`, `menuitem`, `label` — documented per-row.
- `<object>` — excluded. Earlier revision included it based on a misattributed axobject-query EmbeddedObjectRole citation; verification showed that role maps only to `<embed>`, not `<object>`. With no authoritative source backing inclusion, default to non-interactive.

- `template-no-invalid-interactive` — replaces inline native-interactive set.
- `template-no-nested-interactive` — same.

Both rules' behavior is preserved for every case except `<object>` (no longer classified as interactive). Tests updated accordingly — `<object usemap=""><button>` no longer flagged as nested-interactive.
---
 lib/rules/template-no-invalid-interactive.js  |  37 +---
 lib/rules/template-no-nested-interactive.js   |  33 +---
 lib/utils/native-interactive-elements.js      |  92 ++++++++++
 .../rules/template-no-invalid-interactive.js  |  21 +++
 .../rules/template-no-nested-interactive.js   |  58 +++---
 .../utils/native-interactive-elements-test.js | 167 ++++++++++++++++++
 6 files changed, 319 insertions(+), 89 deletions(-)
 create mode 100644 lib/utils/native-interactive-elements.js
 create mode 100644 tests/lib/utils/native-interactive-elements-test.js

diff --git a/lib/rules/template-no-invalid-interactive.js b/lib/rules/template-no-invalid-interactive.js
index 57df493826..c723a7e9ef 100644
--- a/lib/rules/template-no-invalid-interactive.js
+++ b/lib/rules/template-no-invalid-interactive.js
@@ -1,4 +1,5 @@
 const { isNativeElement } = require('../utils/is-native-element');
+const { isNativeInteractive } = require('../utils/native-interactive-elements');
 
 function hasAttr(node, name) {
   return node.attributes?.some((a) => a.name === name);
@@ -74,19 +75,6 @@ module.exports = {
     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',
-    ]);
-
     const INTERACTIVE_ROLES = new Set([
       'button',
       'checkbox',
@@ -109,7 +97,6 @@ module.exports = {
       'gridcell',
     ]);
 
-    // eslint-disable-next-line complexity
     function isInteractive(node) {
       const tag = node.tag?.toLowerCase();
       if (!tag) {
@@ -120,24 +107,10 @@ module.exports = {
         return true;
       }
 
-      // <a> is only interactive when it has href
-      if (tag === 'a' && hasAttr(node, 'href')) {
-        return true;
-      }
-
-      // <audio>/<video> with controls attribute is interactive
-      if ((tag === 'audio' || tag === 'video') && hasAttr(node, 'controls')) {
-        return true;
-      }
-
-      if (NATIVE_INTERACTIVE_ELEMENTS.has(tag)) {
-        // Hidden input is not interactive
-        if (tag === 'input') {
-          const type = getTextAttr(node, 'type');
-          if (type === 'hidden') {
-            return false;
-          }
-        }
+      // Native HTML tags whose interactivity is settled by the shared util
+      // (handles a[href], area[href], audio/video[controls], input-not-hidden,
+      // excludes label/menuitem, keeps option/datalist/canvas/object interactive).
+      if (isNativeInteractive(node, getTextAttr)) {
         return true;
       }
 
diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index a7591c64cf..5a8aaff243 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -1,14 +1,4 @@
-const NATIVE_INTERACTIVE_ELEMENTS = new Set([
-  'button',
-  'details',
-  'embed',
-  'iframe',
-  'input',
-  'label',
-  'select',
-  'summary',
-  'textarea',
-]);
+const { isNativeInteractive } = require('../utils/native-interactive-elements');
 
 const INTERACTIVE_ROLES = new Set([
   'button',
@@ -122,18 +112,10 @@ module.exports = {
         return true;
       }
 
-      if (NATIVE_INTERACTIVE_ELEMENTS.has(tag)) {
-        if (tag === 'input') {
-          const type = getTextAttr(node, 'type');
-          if (type === 'hidden') {
-            return false;
-          }
-        }
-        return true;
-      }
-
-      // <a> with href is interactive (without href, <a> is not interactive)
-      if (tag === 'a' && hasAttr(node, 'href')) {
+      // Native HTML tags whose interactivity is settled by the shared util
+      // (handles a[href], area[href], audio/video[controls], input-not-hidden,
+      // excludes label/menuitem, keeps option/datalist/canvas/object interactive).
+      if (isNativeInteractive(node, getTextAttr)) {
         return true;
       }
 
@@ -175,10 +157,7 @@ module.exports = {
       if (additionalInteractiveTags.has(tag)) {
         return false;
       }
-      if (NATIVE_INTERACTIVE_ELEMENTS.has(tag)) {
-        return false;
-      }
-      if (tag === 'a' && hasAttr(node, 'href')) {
+      if (isNativeInteractive(node, getTextAttr)) {
         return false;
       }
       const role = getTextAttr(node, 'role');
diff --git a/lib/utils/native-interactive-elements.js b/lib/utils/native-interactive-elements.js
new file mode 100644
index 0000000000..33303c42c0
--- /dev/null
+++ b/lib/utils/native-interactive-elements.js
@@ -0,0 +1,92 @@
+'use strict';
+
+/**
+ * Native-interactive HTML element classification, shared across rules that need to
+ * ask "does this HTML tag natively expose interactive UI to keyboard / AT users?".
+ *
+ * Hand-curated rather than derived directly from axobject-query because
+ * axobject-query disagrees with browser reality on several rows (notably
+ * audio/video where axobject-query marks them unconditionally widget, but
+ * browsers only render keyboard UI when `controls` is set). Decision
+ * rationale is documented per-tag:
+ *
+ * | Element                                  | Behavior             | Rationale                                                                                     |
+ * |------------------------------------------|----------------------|-----------------------------------------------------------------------------------------------|
+ * | button, select, textarea, embed, summary | Interactive          | axobject-query widget; universally accepted.                                                  |
+ * | iframe                                   | Interactive          | axobject-query types it `window` (not widget), but iframe IS focusable and delegates focus.   |
+ * | details                                  | Interactive          | axobject-query types it `structure`, but <details> is a keyboard-activatable disclosure.      |
+ * | input (except type=hidden)               | Interactive          | axobject-query widget for every type except `hidden` (which has no entry).                    |
+ * | option, datalist                         | Interactive          | axobject-query widget (ListBoxOptionRole / ListBoxRole).                                      |
+ * | canvas                                   | Interactive          | axobject-query widget (CanvasRole); convention + no-false-positive bias.                      |
+ * | a[href], area[href]                      | Interactive (cond.)  | HTML-AAM: anchor interactivity requires href. (area has no axobject-query entry — pragmatic.) |
+ * | audio[controls], video[controls]         | Interactive          | Stricter than axobject-query (which marks bare audio/video as widget). Browsers only render   |
+ * |                                          |                      | keyboard-operable UI when `controls` is present.                                              |
+ * | audio, video (no controls)               | NOT interactive      | Matches browser behavior; axobject-query would disagree here.                                 |
+ * | input[type=hidden]                       | NOT interactive      | HTML spec: no UI, no focus, no AT exposure. axobject-query has no entry.                      |
+ * | menuitem                                 | NOT interactive      | Deprecated HTML; removed from all major browsers despite axobject-query still listing it.     |
+ * | label                                    | NOT interactive      | axobject-query LabelRole is structure, not widget.                                            |
+ * | object                                   | NOT interactive      | axobject-query has no entry for <object>; no authoritative source backs "interactive by default." |
+ */
+
+// Unconditionally-interactive HTML tags (no attribute dependencies).
+const UNCONDITIONAL_INTERACTIVE_TAGS = new Set([
+  'button',
+  'select',
+  'textarea',
+  'iframe',
+  'embed',
+  'summary',
+  'details',
+  'option',
+  'datalist',
+  'canvas',
+]);
+
+/**
+ * Determine whether a Glimmer element node represents a natively-interactive
+ * HTML element.
+ *
+ * @param {object} node                 Glimmer `ElementNode` (has a string `tag`).
+ * @param {Function} getTextAttrValue   Helper (node, attrName) -> string | undefined
+ *                                      that returns the text value of a static
+ *                                      attribute, or undefined for dynamic / missing.
+ * @returns {boolean}                   True if the element is natively interactive.
+ */
+function isNativeInteractive(node, getTextAttrValue) {
+  const rawTag = node && node.tag;
+  if (typeof rawTag !== 'string' || rawTag.length === 0) {
+    return false;
+  }
+  const tag = rawTag.toLowerCase();
+
+  // Unconditional interactive tags.
+  if (UNCONDITIONAL_INTERACTIVE_TAGS.has(tag)) {
+    return true;
+  }
+
+  // <input> is interactive unless type="hidden" (HTML spec: no UI/focus/AT exposure).
+  if (tag === 'input') {
+    const type = getTextAttrValue(node, 'type');
+    return type !== 'hidden';
+  }
+
+  // <a> and <area> are interactive only when an href is present (HTML-AAM).
+  if (tag === 'a' || tag === 'area') {
+    return hasAttribute(node, 'href');
+  }
+
+  // <audio>/<video> are only interactive when `controls` is present.
+  if (tag === 'audio' || tag === 'video') {
+    return hasAttribute(node, 'controls');
+  }
+
+  return false;
+}
+
+function hasAttribute(node, name) {
+  return Boolean(node.attributes && node.attributes.some((a) => a.name === name));
+}
+
+module.exports = {
+  isNativeInteractive,
+};
diff --git a/tests/lib/rules/template-no-invalid-interactive.js b/tests/lib/rules/template-no-invalid-interactive.js
index 6d95b064ed..9dfb2f12b3 100644
--- a/tests/lib/rules/template-no-invalid-interactive.js
+++ b/tests/lib/rules/template-no-invalid-interactive.js
@@ -75,6 +75,13 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     '<template><audio controls onclick={{this.play}}></audio></template>',
     '<template><video controls onclick={{this.play}}></video></template>',
 
+    // <option> and <datalist> are interactive (aria option/listbox roles)
+    '<template><option onclick={{this.select}}>Opt</option></template>',
+    '<template><datalist onclick={{this.show}}></datalist></template>',
+
+    // <canvas> is kept as a native-interactive widget (axobject CanvasRole; no-FP bias).
+    '<template><canvas onclick={{this.draw}}></canvas></template>',
+
     // usemap only makes img/object interactive
     '<template><img usemap="#map" onclick={{this.click}}></template>',
 
@@ -212,5 +219,19 @@ ruleTester.run('template-no-invalid-interactive', rule, {
         },
       ],
     },
+    {
+      // <label> is NOT native-interactive (structure role, not widget).
+      // Click-forwarding is a spec behavior of <label>, not widget-ness, so an
+      // interactive handler on <label> itself is invalid.
+      filename: 'test.gjs',
+      code: '<template><label onclick={{this.handleClick}}>Label</label></template>',
+      output: null,
+      errors: [
+        {
+          messageId: 'noInvalidInteractive',
+          data: { tagName: 'label', handler: 'onclick' },
+        },
+      ],
+    },
   ],
 });
diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 264b65b29c..c111334557 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -39,6 +39,19 @@ ruleTester.run('template-no-nested-interactive', rule, {
         Text
       </label>
     </template>`,
+    // <label> is NOT a native-interactive widget (structure role per axobject-query),
+    // so multiple interactive children inside a <label> do not fire nested-interactive.
+    // (Outer label-click-forwarding is a spec behavior of <label>, not widget-ness.)
+    `<template>
+      <label>
+        <button>Click</button>
+        <a href="#">Link</a>
+      </label>
+    </template>`,
+    '<template><label><input><input></label></template>',
+    // <audio>/<video> without `controls` are NOT interactive (no rendered UI, no focus).
+    '<template><button><audio></audio></button></template>',
+    '<template><button><video></video></button></template>',
     `<template>
       <div role="presentation">
         <button>Click</button>
@@ -127,16 +140,6 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ messageId: 'nested' }],
     },
-    {
-      code: `<template>
-        <label>
-          <button>Click</button>
-          <a href="#">Link</a>
-        </label>
-      </template>`,
-      output: null,
-      errors: [{ messageId: 'nested' }],
-    },
     {
       code: `<template>
         <div role="button">
@@ -217,13 +220,14 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ messageId: 'nested' }],
     },
+    // <audio controls> / <video controls> are native-interactive; nesting inside <button> fires.
     {
-      code: '<template><object usemap=""><button></button></object></template>',
+      code: '<template><button><video controls></video></button></template>',
       output: null,
       errors: [{ messageId: 'nested' }],
     },
     {
-      code: '<template><label><input><input></label></template>',
+      code: '<template><button><audio controls></audio></button></template>',
       output: null,
       errors: [{ messageId: 'nested' }],
     },
@@ -307,6 +311,15 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       code: '<button><img usemap=""></button>',
       options: [{ ignoreUsemapAttribute: true }],
     },
+    // <label> is NOT a native-interactive widget (structure role per axobject-query).
+    '<label><input><input></label>',
+    `<label for="foo">
+  <div id="foo" tabindex=-1></div>
+  <input>
+</label>`,
+    // <audio>/<video> without `controls` are NOT interactive.
+    '<button><audio></audio></button>',
+    '<button><video></video></button>',
   ],
   invalid: [
     {
@@ -379,16 +392,6 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ message: 'Do not nest interactive element <img> inside <button>.' }],
     },
-    {
-      code: '<object usemap=""><button></button></object>',
-      output: null,
-      errors: [{ message: 'Do not nest interactive element <button> inside <object>.' }],
-    },
-    {
-      code: '<label><input><input></label>',
-      output: null,
-      errors: [{ message: 'Do not nest interactive element <input> inside <label>.' }],
-    },
     // Config: additionalInteractiveTags
     {
       code: '<button><my-special-input></my-special-input></button>',
@@ -396,16 +399,11 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       options: [{ additionalInteractiveTags: ['my-special-input'] }],
       errors: [{ message: 'Do not nest interactive element <my-special-input> inside <button>.' }],
     },
-    // Label with multiple interactive children including tabindex
+    // <video controls> is native-interactive; nesting inside <button> fires.
     {
-      code: [
-        '<label for="foo">',
-        '  <div id="foo" tabindex=-1></div>',
-        '  <input>',
-        '</label>',
-      ].join('\n'),
+      code: '<button><video controls></video></button>',
       output: null,
-      errors: [{ message: 'Do not nest interactive element <input> inside <label>.' }],
+      errors: [{ message: 'Do not nest interactive element <video> inside <button>.' }],
     },
   ],
 });
diff --git a/tests/lib/utils/native-interactive-elements-test.js b/tests/lib/utils/native-interactive-elements-test.js
new file mode 100644
index 0000000000..5f6689d8b8
--- /dev/null
+++ b/tests/lib/utils/native-interactive-elements-test.js
@@ -0,0 +1,167 @@
+'use strict';
+
+const { isNativeInteractive } = require('../../../lib/utils/native-interactive-elements');
+
+function makeNode(tag, attrs = {}) {
+  return {
+    tag,
+    attributes: Object.entries(attrs).map(([name, value]) => {
+      if (value === true) {
+        // boolean-style attribute, no value
+        return { name, value: { type: 'GlimmerTextNode', chars: '' } };
+      }
+      return { name, value: { type: 'GlimmerTextNode', chars: String(value) } };
+    }),
+  };
+}
+
+function getTextAttrValue(node, name) {
+  const attr = node.attributes && node.attributes.find((a) => a.name === name);
+  if (attr && attr.value && attr.value.type === 'GlimmerTextNode') {
+    return attr.value.chars;
+  }
+  return undefined;
+}
+
+describe('isNativeInteractive', () => {
+  describe('unconditionally interactive widgets', () => {
+    for (const tag of ['button', 'select', 'textarea', 'iframe', 'embed', 'summary', 'details']) {
+      it(`<${tag}> is interactive`, () => {
+        expect(isNativeInteractive(makeNode(tag), getTextAttrValue)).toBe(true);
+      });
+    }
+  });
+
+  describe('<input>', () => {
+    it('is interactive without type attribute', () => {
+      expect(isNativeInteractive(makeNode('input'), getTextAttrValue)).toBe(true);
+    });
+
+    it('is interactive when type="text"', () => {
+      expect(isNativeInteractive(makeNode('input', { type: 'text' }), getTextAttrValue)).toBe(true);
+    });
+
+    it('is NOT interactive when type="hidden"', () => {
+      expect(isNativeInteractive(makeNode('input', { type: 'hidden' }), getTextAttrValue)).toBe(
+        false
+      );
+    });
+  });
+
+  describe('<option> and <datalist>', () => {
+    it('<option> is interactive (aria option role)', () => {
+      expect(isNativeInteractive(makeNode('option'), getTextAttrValue)).toBe(true);
+    });
+
+    it('<datalist> is interactive (aria listbox role)', () => {
+      expect(isNativeInteractive(makeNode('datalist'), getTextAttrValue)).toBe(true);
+    });
+  });
+
+  describe('<a>', () => {
+    it('is interactive when href is present', () => {
+      expect(isNativeInteractive(makeNode('a', { href: '/about' }), getTextAttrValue)).toBe(true);
+    });
+
+    it('is NOT interactive without href', () => {
+      expect(isNativeInteractive(makeNode('a'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('<area>', () => {
+    it('is interactive when href is present', () => {
+      expect(isNativeInteractive(makeNode('area', { href: '/map' }), getTextAttrValue)).toBe(true);
+    });
+
+    it('is NOT interactive without href', () => {
+      expect(isNativeInteractive(makeNode('area'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('<audio> / <video>', () => {
+    it('<audio controls> is interactive', () => {
+      expect(isNativeInteractive(makeNode('audio', { controls: true }), getTextAttrValue)).toBe(
+        true
+      );
+    });
+
+    it('<video controls> is interactive', () => {
+      expect(isNativeInteractive(makeNode('video', { controls: true }), getTextAttrValue)).toBe(
+        true
+      );
+    });
+
+    it('<audio> without controls is NOT interactive', () => {
+      expect(isNativeInteractive(makeNode('audio'), getTextAttrValue)).toBe(false);
+    });
+
+    it('<video> without controls is NOT interactive', () => {
+      expect(isNativeInteractive(makeNode('video'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('<object>', () => {
+    it('is NOT interactive (axobject-query has no entry for <object>)', () => {
+      expect(isNativeInteractive(makeNode('object'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('<canvas>', () => {
+    it('is interactive (axobject CanvasRole widget; no-FP bias)', () => {
+      expect(isNativeInteractive(makeNode('canvas'), getTextAttrValue)).toBe(true);
+    });
+  });
+
+  describe('excluded elements (documented NOT-interactive)', () => {
+    it('<label> is NOT interactive (structure role, not widget)', () => {
+      expect(isNativeInteractive(makeNode('label'), getTextAttrValue)).toBe(false);
+    });
+
+    it('<menuitem> is NOT interactive (deprecated, dropped across browsers)', () => {
+      expect(isNativeInteractive(makeNode('menuitem'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('non-interactive tags', () => {
+    for (const tag of ['div', 'span', 'p', 'section', 'article', 'header', 'footer', 'img']) {
+      it(`<${tag}> is not interactive`, () => {
+        expect(isNativeInteractive(makeNode(tag), getTextAttrValue)).toBe(false);
+      });
+    }
+  });
+
+  describe('tag normalization', () => {
+    it('lowercases tag names before classification', () => {
+      expect(isNativeInteractive(makeNode('BUTTON'), getTextAttrValue)).toBe(true);
+      expect(isNativeInteractive(makeNode('Input', { type: 'hidden' }), getTextAttrValue)).toBe(
+        false
+      );
+      expect(isNativeInteractive(makeNode('A', { href: '/x' }), getTextAttrValue)).toBe(true);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('returns false for missing tag', () => {
+      expect(isNativeInteractive({}, getTextAttrValue)).toBe(false);
+    });
+
+    it('returns false for non-string tag', () => {
+      expect(isNativeInteractive({ tag: null }, getTextAttrValue)).toBe(false);
+      expect(isNativeInteractive({ tag: 123 }, getTextAttrValue)).toBe(false);
+    });
+
+    it('returns false for empty-string tag', () => {
+      expect(isNativeInteractive({ tag: '' }, getTextAttrValue)).toBe(false);
+    });
+
+    it('handles nodes without attributes array (a/area without href)', () => {
+      expect(isNativeInteractive({ tag: 'a' }, getTextAttrValue)).toBe(false);
+      expect(isNativeInteractive({ tag: 'area' }, getTextAttrValue)).toBe(false);
+    });
+
+    it('handles nodes without attributes array (audio/video without controls)', () => {
+      expect(isNativeInteractive({ tag: 'audio' }, getTextAttrValue)).toBe(false);
+      expect(isNativeInteractive({ tag: 'video' }, getTextAttrValue)).toBe(false);
+    });
+  });
+});

From ad391dcf65a13a784b7d2bfef9b7fca7e03612ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Wed, 22 Apr 2026 09:03:01 +0200
Subject: [PATCH 2/9] refactor: split native-interactive-elements into
 HTML-content-model authority
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace lib/utils/native-interactive-elements.js with
lib/utils/html-interactive-content.js. The new util is strictly scoped
to HTML Living Standard §3.2.5.2.7 Interactive Content (plus <summary>
per §4.11.2):

    button, details, embed, iframe, label, select, summary, textarea
    + a[href], input[!type=hidden], img[usemap], audio[controls], video[controls]

The previous util mixed HTML interactive-content semantics with
axobject-query widget-taxonomy semantics, giving it no single spec
authority to cite. Edge cases (label, object+usemap, canvas, option,
datalist) were adjudicated via hand-waving ("no-false-positive bias")
because neither authority alone justified the list.

This commit commits to HTML §3.2.5.2.7 as the sole authority for the
util. ARIA-widget-role concerns remain in each rule's hardcoded
INTERACTIVE_ROLES set (separate authority, separate concern).

Behavior changes:

- <label> is interactive again (upstream ember-template-lint parity
  restored). <label><input><input></label> flags multi-labelable-child
  via the existing rule-level label-child-counting logic.
- <object usemap> is interactive via rule-level special case (not in
  §3.2.5.2.7 but upstream-parity).
- <canvas> is interactive via rule-level defensive addition (not in
  §3.2.5.2.7 but authors commonly wire for drawing/game UI).
- <option>, <datalist> are no longer interactive (they were #37 prior
  defensive additions, not in HTML §3.2.5.2.7; rules wanting them can
  consult aria-query widgets separately).
- <area[href]> is no longer interactive via this util (not in §3.2.5.2.7;
  rules wanting it should use the ARIA widget-role authority).

Test updates mirror these changes — restored label-multi-child and
object-usemap INVALID cases; removed option/datalist/canvas-defensive
valid cases.

Supersedes the "decision table" framing of the previous PR body — see
updated PR description for the authority-split rationale.
---
 lib/rules/template-no-invalid-interactive.js  |  17 +-
 lib/rules/template-no-nested-interactive.js   |  27 ++-
 lib/utils/html-interactive-content.js         |  94 +++++++++
 lib/utils/native-interactive-elements.js      |  92 ---------
 .../rules/template-no-invalid-interactive.js  |  21 +-
 .../rules/template-no-nested-interactive.js   |  62 ++++--
 .../utils/html-interactive-content-test.js    | 186 ++++++++++++++++++
 .../utils/native-interactive-elements-test.js | 167 ----------------
 8 files changed, 356 insertions(+), 310 deletions(-)
 create mode 100644 lib/utils/html-interactive-content.js
 delete mode 100644 lib/utils/native-interactive-elements.js
 create mode 100644 tests/lib/utils/html-interactive-content-test.js
 delete mode 100644 tests/lib/utils/native-interactive-elements-test.js

diff --git a/lib/rules/template-no-invalid-interactive.js b/lib/rules/template-no-invalid-interactive.js
index c723a7e9ef..6b98fd5b80 100644
--- a/lib/rules/template-no-invalid-interactive.js
+++ b/lib/rules/template-no-invalid-interactive.js
@@ -1,5 +1,5 @@
 const { isNativeElement } = require('../utils/is-native-element');
-const { isNativeInteractive } = require('../utils/native-interactive-elements');
+const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 
 function hasAttr(node, name) {
   return node.attributes?.some((a) => a.name === name);
@@ -107,10 +107,17 @@ module.exports = {
         return true;
       }
 
-      // Native HTML tags whose interactivity is settled by the shared util
-      // (handles a[href], area[href], audio/video[controls], input-not-hidden,
-      // excludes label/menuitem, keeps option/datalist/canvas/object interactive).
-      if (isNativeInteractive(node, getTextAttr)) {
+      // 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)) {
+        return true;
+      }
+
+      // <canvas> — not in §3.2.5.2.7 but upstream ember-template-lint treats
+      // it as interactive (canvas is commonly wired for drawing/game UI where
+      // event handlers are expected). Preserved for upstream parity.
+      if (tag === 'canvas') {
         return true;
       }
 
diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index 5a8aaff243..1d5c156e09 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -1,4 +1,4 @@
-const { isNativeInteractive } = require('../utils/native-interactive-elements');
+const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 
 const INTERACTIVE_ROLES = new Set([
   'button',
@@ -112,14 +112,21 @@ module.exports = {
         return true;
       }
 
-      // Native HTML tags whose interactivity is settled by the shared util
-      // (handles a[href], area[href], audio/video[controls], input-not-hidden,
-      // excludes label/menuitem, keeps option/datalist/canvas/object interactive).
-      if (isNativeInteractive(node, getTextAttr)) {
+      // HTML §3.2.5.2.7 interactive content (authoritative for content-model
+      // nesting — handles a[href], audio/video[controls], input[!hidden],
+      // img[usemap], plus label/button/select/textarea/iframe/etc. unconditional).
+      if (isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap })) {
         return true;
       }
 
-      // Check role
+      // <canvas> — not in §3.2.5.2.7 but upstream ember-template-lint treats
+      // it as interactive. Preserved for parity.
+      if (tag === 'canvas') {
+        return true;
+      }
+
+      // ARIA widget roles (author-declared interactivity — separate authority
+      // from HTML content-model; see `docs/architectural/interactive.md`).
       const role = getTextAttr(node, 'role');
       if (role && INTERACTIVE_ROLES.has(role)) {
         return true;
@@ -136,8 +143,10 @@ module.exports = {
         return true;
       }
 
-      // Check usemap (only on img and object elements)
-      if (!ignoreUsemap && (tag === 'img' || tag === 'object') && hasAttr(node, 'usemap')) {
+      // <object usemap> — not in HTML §3.2.5.2.7 but upstream ember-template-lint
+      // treats object+usemap as interactive (image-map behavior). Rule-level
+      // special case for upstream parity; revisit if/when HTML-AAM clarifies.
+      if (!ignoreUsemap && tag === 'object' && hasAttr(node, 'usemap')) {
         return true;
       }
 
@@ -157,7 +166,7 @@ module.exports = {
       if (additionalInteractiveTags.has(tag)) {
         return false;
       }
-      if (isNativeInteractive(node, getTextAttr)) {
+      if (isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap })) {
         return false;
       }
       const role = getTextAttr(node, 'role');
diff --git a/lib/utils/html-interactive-content.js b/lib/utils/html-interactive-content.js
new file mode 100644
index 0000000000..64268dc50c
--- /dev/null
+++ b/lib/utils/html-interactive-content.js
@@ -0,0 +1,94 @@
+'use strict';
+
+/**
+ * HTML "interactive content" classification, authoritative per
+ * [HTML Living Standard §3.2.5.2.7 Interactive content]
+ * (https://html.spec.whatwg.org/multipage/dom.html#interactive-content):
+ *
+ *   a (if the href attribute is present), audio (if the controls attribute
+ *   is present), button, details, embed, iframe, img (if the usemap
+ *   attribute is present), input (if the type attribute is not in the
+ *   Hidden state), label, select, textarea, video (if the controls
+ *   attribute is present).
+ *
+ * Plus <summary>, which is not in §3.2.5.2.7 but is keyboard-activatable per
+ * [§4.11.2 The summary element](https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element).
+ *
+ * This is the HTML-content-model authority — it answers "does the HTML spec
+ * prohibit nesting this inside an interactive parent?" It does NOT answer
+ * "is this an ARIA widget for AT semantics?" (see `interactive-roles.js`
+ * for that). The two questions diverge on rows like <label> (HTML: yes;
+ * ARIA: structure role), <canvas> (HTML: no; ARIA: widget per axobject),
+ * and <option>/<datalist> (HTML: no; ARIA: widgets). Rules that need
+ * "interactive for any reason" should compose both authorities.
+ */
+
+const UNCONDITIONAL_INTERACTIVE_TAGS = new Set([
+  'button',
+  'details',
+  'embed',
+  'iframe',
+  'label',
+  'select',
+  'summary',
+  'textarea',
+]);
+
+/**
+ * Determine whether a Glimmer element node is HTML-interactive content per
+ * §3.2.5.2.7 (+ summary).
+ *
+ * @param {object} node                 Glimmer ElementNode (has a string `tag`).
+ * @param {Function} getTextAttrValue   Helper (node, attrName) -> string | undefined
+ *                                      returning the static text value of an
+ *                                      attribute, or undefined for dynamic / missing.
+ * @param {object} [options]
+ * @param {boolean} [options.ignoreUsemap=false]  Treat `<img usemap>` as NOT interactive.
+ *                                                Consumed by rules with an `ignoreUsemap`
+ *                                                config option that lets authors opt out
+ *                                                of image-map-based interactivity.
+ * @returns {boolean}
+ */
+function isHtmlInteractiveContent(node, getTextAttrValue, options = {}) {
+  const rawTag = node && node.tag;
+  if (typeof rawTag !== 'string' || rawTag.length === 0) {
+    return false;
+  }
+  const tag = rawTag.toLowerCase();
+
+  if (UNCONDITIONAL_INTERACTIVE_TAGS.has(tag)) {
+    return true;
+  }
+
+  // input — interactive unless type="hidden"
+  if (tag === 'input') {
+    const type = getTextAttrValue(node, 'type');
+    return type !== 'hidden';
+  }
+
+  // a — interactive only when href is present
+  if (tag === 'a') {
+    return hasAttribute(node, 'href');
+  }
+
+  // img — interactive only when usemap is present (image map)
+  if (tag === 'img') {
+    if (options.ignoreUsemap) {
+      return false;
+    }
+    return hasAttribute(node, 'usemap');
+  }
+
+  // audio / video — interactive only when controls is present
+  if (tag === 'audio' || tag === 'video') {
+    return hasAttribute(node, 'controls');
+  }
+
+  return false;
+}
+
+function hasAttribute(node, name) {
+  return Boolean(node.attributes && node.attributes.some((a) => a.name === name));
+}
+
+module.exports = { isHtmlInteractiveContent };
diff --git a/lib/utils/native-interactive-elements.js b/lib/utils/native-interactive-elements.js
deleted file mode 100644
index 33303c42c0..0000000000
--- a/lib/utils/native-interactive-elements.js
+++ /dev/null
@@ -1,92 +0,0 @@
-'use strict';
-
-/**
- * Native-interactive HTML element classification, shared across rules that need to
- * ask "does this HTML tag natively expose interactive UI to keyboard / AT users?".
- *
- * Hand-curated rather than derived directly from axobject-query because
- * axobject-query disagrees with browser reality on several rows (notably
- * audio/video where axobject-query marks them unconditionally widget, but
- * browsers only render keyboard UI when `controls` is set). Decision
- * rationale is documented per-tag:
- *
- * | Element                                  | Behavior             | Rationale                                                                                     |
- * |------------------------------------------|----------------------|-----------------------------------------------------------------------------------------------|
- * | button, select, textarea, embed, summary | Interactive          | axobject-query widget; universally accepted.                                                  |
- * | iframe                                   | Interactive          | axobject-query types it `window` (not widget), but iframe IS focusable and delegates focus.   |
- * | details                                  | Interactive          | axobject-query types it `structure`, but <details> is a keyboard-activatable disclosure.      |
- * | input (except type=hidden)               | Interactive          | axobject-query widget for every type except `hidden` (which has no entry).                    |
- * | option, datalist                         | Interactive          | axobject-query widget (ListBoxOptionRole / ListBoxRole).                                      |
- * | canvas                                   | Interactive          | axobject-query widget (CanvasRole); convention + no-false-positive bias.                      |
- * | a[href], area[href]                      | Interactive (cond.)  | HTML-AAM: anchor interactivity requires href. (area has no axobject-query entry — pragmatic.) |
- * | audio[controls], video[controls]         | Interactive          | Stricter than axobject-query (which marks bare audio/video as widget). Browsers only render   |
- * |                                          |                      | keyboard-operable UI when `controls` is present.                                              |
- * | audio, video (no controls)               | NOT interactive      | Matches browser behavior; axobject-query would disagree here.                                 |
- * | input[type=hidden]                       | NOT interactive      | HTML spec: no UI, no focus, no AT exposure. axobject-query has no entry.                      |
- * | menuitem                                 | NOT interactive      | Deprecated HTML; removed from all major browsers despite axobject-query still listing it.     |
- * | label                                    | NOT interactive      | axobject-query LabelRole is structure, not widget.                                            |
- * | object                                   | NOT interactive      | axobject-query has no entry for <object>; no authoritative source backs "interactive by default." |
- */
-
-// Unconditionally-interactive HTML tags (no attribute dependencies).
-const UNCONDITIONAL_INTERACTIVE_TAGS = new Set([
-  'button',
-  'select',
-  'textarea',
-  'iframe',
-  'embed',
-  'summary',
-  'details',
-  'option',
-  'datalist',
-  'canvas',
-]);
-
-/**
- * Determine whether a Glimmer element node represents a natively-interactive
- * HTML element.
- *
- * @param {object} node                 Glimmer `ElementNode` (has a string `tag`).
- * @param {Function} getTextAttrValue   Helper (node, attrName) -> string | undefined
- *                                      that returns the text value of a static
- *                                      attribute, or undefined for dynamic / missing.
- * @returns {boolean}                   True if the element is natively interactive.
- */
-function isNativeInteractive(node, getTextAttrValue) {
-  const rawTag = node && node.tag;
-  if (typeof rawTag !== 'string' || rawTag.length === 0) {
-    return false;
-  }
-  const tag = rawTag.toLowerCase();
-
-  // Unconditional interactive tags.
-  if (UNCONDITIONAL_INTERACTIVE_TAGS.has(tag)) {
-    return true;
-  }
-
-  // <input> is interactive unless type="hidden" (HTML spec: no UI/focus/AT exposure).
-  if (tag === 'input') {
-    const type = getTextAttrValue(node, 'type');
-    return type !== 'hidden';
-  }
-
-  // <a> and <area> are interactive only when an href is present (HTML-AAM).
-  if (tag === 'a' || tag === 'area') {
-    return hasAttribute(node, 'href');
-  }
-
-  // <audio>/<video> are only interactive when `controls` is present.
-  if (tag === 'audio' || tag === 'video') {
-    return hasAttribute(node, 'controls');
-  }
-
-  return false;
-}
-
-function hasAttribute(node, name) {
-  return Boolean(node.attributes && node.attributes.some((a) => a.name === name));
-}
-
-module.exports = {
-  isNativeInteractive,
-};
diff --git a/tests/lib/rules/template-no-invalid-interactive.js b/tests/lib/rules/template-no-invalid-interactive.js
index 9dfb2f12b3..62aed2fdff 100644
--- a/tests/lib/rules/template-no-invalid-interactive.js
+++ b/tests/lib/rules/template-no-invalid-interactive.js
@@ -75,11 +75,8 @@ ruleTester.run('template-no-invalid-interactive', rule, {
     '<template><audio controls onclick={{this.play}}></audio></template>',
     '<template><video controls onclick={{this.play}}></video></template>',
 
-    // <option> and <datalist> are interactive (aria option/listbox roles)
-    '<template><option onclick={{this.select}}>Opt</option></template>',
-    '<template><datalist onclick={{this.show}}></datalist></template>',
-
-    // <canvas> is kept as a native-interactive widget (axobject CanvasRole; no-FP bias).
+    // <canvas> — not in HTML §3.2.5.2.7, but upstream ember-template-lint
+    // treats it as interactive (drawing/game-UI convention); preserved for parity.
     '<template><canvas onclick={{this.draw}}></canvas></template>',
 
     // usemap only makes img/object interactive
@@ -219,19 +216,5 @@ ruleTester.run('template-no-invalid-interactive', rule, {
         },
       ],
     },
-    {
-      // <label> is NOT native-interactive (structure role, not widget).
-      // Click-forwarding is a spec behavior of <label>, not widget-ness, so an
-      // interactive handler on <label> itself is invalid.
-      filename: 'test.gjs',
-      code: '<template><label onclick={{this.handleClick}}>Label</label></template>',
-      output: null,
-      errors: [
-        {
-          messageId: 'noInvalidInteractive',
-          data: { tagName: 'label', handler: 'onclick' },
-        },
-      ],
-    },
   ],
 });
diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index c111334557..0d2ec90924 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -39,16 +39,6 @@ ruleTester.run('template-no-nested-interactive', rule, {
         Text
       </label>
     </template>`,
-    // <label> is NOT a native-interactive widget (structure role per axobject-query),
-    // so multiple interactive children inside a <label> do not fire nested-interactive.
-    // (Outer label-click-forwarding is a spec behavior of <label>, not widget-ness.)
-    `<template>
-      <label>
-        <button>Click</button>
-        <a href="#">Link</a>
-      </label>
-    </template>`,
-    '<template><label><input><input></label></template>',
     // <audio>/<video> without `controls` are NOT interactive (no rendered UI, no focus).
     '<template><button><audio></audio></button></template>',
     '<template><button><video></video></button></template>',
@@ -220,7 +210,31 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ messageId: 'nested' }],
     },
-    // <audio controls> / <video controls> are native-interactive; nesting inside <button> fires.
+    // Label-association: HTML's "first labelable descendant" rule means a
+    // second interactive child is orphaned from the label. Flag per upstream
+    // ember-template-lint parity.
+    {
+      code: `<template>
+        <label>
+          <button>Click</button>
+          <a href="#">Link</a>
+        </label>
+      </template>`,
+      output: null,
+      errors: [{ messageId: 'nested' }],
+    },
+    {
+      code: '<template><label><input><input></label></template>',
+      output: null,
+      errors: [{ messageId: 'nested' }],
+    },
+    // <object usemap> is interactive via rule-level special case (upstream parity).
+    {
+      code: '<template><object usemap=""><button></button></object></template>',
+      output: null,
+      errors: [{ messageId: 'nested' }],
+    },
+    // <audio controls> / <video controls> are HTML interactive content; nesting inside <button> fires.
     {
       code: '<template><button><video controls></video></button></template>',
       output: null,
@@ -311,12 +325,6 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       code: '<button><img usemap=""></button>',
       options: [{ ignoreUsemapAttribute: true }],
     },
-    // <label> is NOT a native-interactive widget (structure role per axobject-query).
-    '<label><input><input></label>',
-    `<label for="foo">
-  <div id="foo" tabindex=-1></div>
-  <input>
-</label>`,
     // <audio>/<video> without `controls` are NOT interactive.
     '<button><audio></audio></button>',
     '<button><video></video></button>',
@@ -392,6 +400,24 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ message: 'Do not nest interactive element <img> inside <button>.' }],
     },
+    // <object usemap> is interactive via rule-level special case (upstream parity).
+    {
+      code: '<object usemap=""><button></button></object>',
+      output: null,
+      errors: [{ message: 'Do not nest interactive element <button> inside <object>.' }],
+    },
+    // Label-association: HTML's "first labelable descendant" rule means a
+    // second interactive child is orphaned from the label.
+    {
+      code: '<label><button>Click</button><a href="#">Link</a></label>',
+      output: null,
+      errors: [{ message: 'Do not nest interactive element <a> inside <label>.' }],
+    },
+    {
+      code: '<label><input><input></label>',
+      output: null,
+      errors: [{ message: 'Do not nest interactive element <input> inside <label>.' }],
+    },
     // Config: additionalInteractiveTags
     {
       code: '<button><my-special-input></my-special-input></button>',
@@ -399,7 +425,7 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       options: [{ additionalInteractiveTags: ['my-special-input'] }],
       errors: [{ message: 'Do not nest interactive element <my-special-input> inside <button>.' }],
     },
-    // <video controls> is native-interactive; nesting inside <button> fires.
+    // <video controls> is HTML interactive content; nesting inside <button> fires.
     {
       code: '<button><video controls></video></button>',
       output: null,
diff --git a/tests/lib/utils/html-interactive-content-test.js b/tests/lib/utils/html-interactive-content-test.js
new file mode 100644
index 0000000000..afc3d6edc0
--- /dev/null
+++ b/tests/lib/utils/html-interactive-content-test.js
@@ -0,0 +1,186 @@
+'use strict';
+
+const { isHtmlInteractiveContent } = require('../../../lib/utils/html-interactive-content');
+
+function makeNode(tag, attrs = {}) {
+  return {
+    tag,
+    attributes: Object.entries(attrs).map(([name, value]) => {
+      if (value === true) {
+        return { name, value: { type: 'GlimmerTextNode', chars: '' } };
+      }
+      return { name, value: { type: 'GlimmerTextNode', chars: String(value) } };
+    }),
+  };
+}
+
+function getTextAttrValue(node, name) {
+  const attr = node.attributes && node.attributes.find((a) => a.name === name);
+  if (attr && attr.value && attr.value.type === 'GlimmerTextNode') {
+    return attr.value.chars;
+  }
+  return undefined;
+}
+
+describe('isHtmlInteractiveContent', () => {
+  describe('§3.2.5.2.7 unconditional interactive content', () => {
+    for (const tag of ['button', 'details', 'embed', 'iframe', 'label', 'select', 'textarea']) {
+      it(`<${tag}> is interactive`, () => {
+        expect(isHtmlInteractiveContent(makeNode(tag), getTextAttrValue)).toBe(true);
+      });
+    }
+  });
+
+  describe('<summary> (§4.11.2 — keyboard-activatable)', () => {
+    it('<summary> is interactive', () => {
+      expect(isHtmlInteractiveContent(makeNode('summary'), getTextAttrValue)).toBe(true);
+    });
+  });
+
+  describe('<input>', () => {
+    it('is interactive without type attribute (defaults to text)', () => {
+      expect(isHtmlInteractiveContent(makeNode('input'), getTextAttrValue)).toBe(true);
+    });
+
+    it('is interactive when type="text"', () => {
+      expect(isHtmlInteractiveContent(makeNode('input', { type: 'text' }), getTextAttrValue)).toBe(
+        true
+      );
+    });
+
+    it('is NOT interactive when type="hidden"', () => {
+      expect(
+        isHtmlInteractiveContent(makeNode('input', { type: 'hidden' }), getTextAttrValue)
+      ).toBe(false);
+    });
+  });
+
+  describe('<a>', () => {
+    it('is interactive when href is present', () => {
+      expect(isHtmlInteractiveContent(makeNode('a', { href: '/about' }), getTextAttrValue)).toBe(
+        true
+      );
+    });
+
+    it('is NOT interactive without href', () => {
+      expect(isHtmlInteractiveContent(makeNode('a'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('<img>', () => {
+    it('is interactive when usemap is present', () => {
+      expect(isHtmlInteractiveContent(makeNode('img', { usemap: '#m' }), getTextAttrValue)).toBe(
+        true
+      );
+    });
+
+    it('is NOT interactive without usemap', () => {
+      expect(isHtmlInteractiveContent(makeNode('img'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('<audio> / <video>', () => {
+    it('<audio controls> is interactive', () => {
+      expect(
+        isHtmlInteractiveContent(makeNode('audio', { controls: true }), getTextAttrValue)
+      ).toBe(true);
+    });
+
+    it('<video controls> is interactive', () => {
+      expect(
+        isHtmlInteractiveContent(makeNode('video', { controls: true }), getTextAttrValue)
+      ).toBe(true);
+    });
+
+    it('<audio> without controls is NOT interactive', () => {
+      expect(isHtmlInteractiveContent(makeNode('audio'), getTextAttrValue)).toBe(false);
+    });
+
+    it('<video> without controls is NOT interactive', () => {
+      expect(isHtmlInteractiveContent(makeNode('video'), getTextAttrValue)).toBe(false);
+    });
+  });
+
+  describe('elements NOT in §3.2.5.2.7', () => {
+    // <object> is notably absent from §3.2.5.2.7 — rules that want to flag
+    // <object usemap> nesting (e.g. for upstream ember-template-lint parity)
+    // must do so as a rule-level special case, not via this util.
+    it('<object> is NOT interactive (not in §3.2.5.2.7, even with usemap)', () => {
+      expect(isHtmlInteractiveContent(makeNode('object'), getTextAttrValue)).toBe(false);
+      expect(isHtmlInteractiveContent(makeNode('object', { usemap: '#m' }), getTextAttrValue)).toBe(
+        false
+      );
+    });
+
+    // <area> is not in §3.2.5.2.7 either — rules caring about area[href]
+    // should check via the ARIA widget-role authority (area[href] has
+    // implicit role=link per HTML-AAM).
+    it('<area> is NOT interactive (not in §3.2.5.2.7)', () => {
+      expect(isHtmlInteractiveContent(makeNode('area', { href: '/map' }), getTextAttrValue)).toBe(
+        false
+      );
+    });
+
+    // <canvas>, <option>, <datalist> — ARIA widgets per axobject-query, but
+    // not HTML interactive content. Rules wanting these should consult the
+    // ARIA widget-role authority, not this util.
+    for (const tag of ['canvas', 'option', 'datalist']) {
+      it(`<${tag}> is NOT interactive per HTML §3.2.5.2.7`, () => {
+        expect(isHtmlInteractiveContent(makeNode(tag), getTextAttrValue)).toBe(false);
+      });
+    }
+
+    // Deprecated HTML elements.
+    for (const tag of ['menuitem', 'keygen']) {
+      it(`<${tag}> is NOT interactive (deprecated)`, () => {
+        expect(isHtmlInteractiveContent(makeNode(tag), getTextAttrValue)).toBe(false);
+      });
+    }
+  });
+
+  describe('non-interactive tags', () => {
+    for (const tag of ['div', 'span', 'p', 'section', 'article', 'header', 'footer', 'img']) {
+      it(`<${tag}> is not interactive (no relevant attribute)`, () => {
+        expect(isHtmlInteractiveContent(makeNode(tag), getTextAttrValue)).toBe(false);
+      });
+    }
+  });
+
+  describe('tag normalization', () => {
+    it('lowercases tag names before classification', () => {
+      expect(isHtmlInteractiveContent(makeNode('BUTTON'), getTextAttrValue)).toBe(true);
+      expect(
+        isHtmlInteractiveContent(makeNode('Input', { type: 'hidden' }), getTextAttrValue)
+      ).toBe(false);
+      expect(isHtmlInteractiveContent(makeNode('A', { href: '/x' }), getTextAttrValue)).toBe(true);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('returns false for missing tag', () => {
+      expect(isHtmlInteractiveContent({}, getTextAttrValue)).toBe(false);
+    });
+
+    it('returns false for non-string tag', () => {
+      expect(isHtmlInteractiveContent({ tag: null }, getTextAttrValue)).toBe(false);
+      expect(isHtmlInteractiveContent({ tag: 123 }, getTextAttrValue)).toBe(false);
+    });
+
+    it('returns false for empty-string tag', () => {
+      expect(isHtmlInteractiveContent({ tag: '' }, getTextAttrValue)).toBe(false);
+    });
+
+    it('handles nodes without attributes array (a without href)', () => {
+      expect(isHtmlInteractiveContent({ tag: 'a' }, getTextAttrValue)).toBe(false);
+    });
+
+    it('handles nodes without attributes array (audio/video without controls)', () => {
+      expect(isHtmlInteractiveContent({ tag: 'audio' }, getTextAttrValue)).toBe(false);
+      expect(isHtmlInteractiveContent({ tag: 'video' }, getTextAttrValue)).toBe(false);
+    });
+
+    it('handles nodes without attributes array (img without usemap)', () => {
+      expect(isHtmlInteractiveContent({ tag: 'img' }, getTextAttrValue)).toBe(false);
+    });
+  });
+});
diff --git a/tests/lib/utils/native-interactive-elements-test.js b/tests/lib/utils/native-interactive-elements-test.js
deleted file mode 100644
index 5f6689d8b8..0000000000
--- a/tests/lib/utils/native-interactive-elements-test.js
+++ /dev/null
@@ -1,167 +0,0 @@
-'use strict';
-
-const { isNativeInteractive } = require('../../../lib/utils/native-interactive-elements');
-
-function makeNode(tag, attrs = {}) {
-  return {
-    tag,
-    attributes: Object.entries(attrs).map(([name, value]) => {
-      if (value === true) {
-        // boolean-style attribute, no value
-        return { name, value: { type: 'GlimmerTextNode', chars: '' } };
-      }
-      return { name, value: { type: 'GlimmerTextNode', chars: String(value) } };
-    }),
-  };
-}
-
-function getTextAttrValue(node, name) {
-  const attr = node.attributes && node.attributes.find((a) => a.name === name);
-  if (attr && attr.value && attr.value.type === 'GlimmerTextNode') {
-    return attr.value.chars;
-  }
-  return undefined;
-}
-
-describe('isNativeInteractive', () => {
-  describe('unconditionally interactive widgets', () => {
-    for (const tag of ['button', 'select', 'textarea', 'iframe', 'embed', 'summary', 'details']) {
-      it(`<${tag}> is interactive`, () => {
-        expect(isNativeInteractive(makeNode(tag), getTextAttrValue)).toBe(true);
-      });
-    }
-  });
-
-  describe('<input>', () => {
-    it('is interactive without type attribute', () => {
-      expect(isNativeInteractive(makeNode('input'), getTextAttrValue)).toBe(true);
-    });
-
-    it('is interactive when type="text"', () => {
-      expect(isNativeInteractive(makeNode('input', { type: 'text' }), getTextAttrValue)).toBe(true);
-    });
-
-    it('is NOT interactive when type="hidden"', () => {
-      expect(isNativeInteractive(makeNode('input', { type: 'hidden' }), getTextAttrValue)).toBe(
-        false
-      );
-    });
-  });
-
-  describe('<option> and <datalist>', () => {
-    it('<option> is interactive (aria option role)', () => {
-      expect(isNativeInteractive(makeNode('option'), getTextAttrValue)).toBe(true);
-    });
-
-    it('<datalist> is interactive (aria listbox role)', () => {
-      expect(isNativeInteractive(makeNode('datalist'), getTextAttrValue)).toBe(true);
-    });
-  });
-
-  describe('<a>', () => {
-    it('is interactive when href is present', () => {
-      expect(isNativeInteractive(makeNode('a', { href: '/about' }), getTextAttrValue)).toBe(true);
-    });
-
-    it('is NOT interactive without href', () => {
-      expect(isNativeInteractive(makeNode('a'), getTextAttrValue)).toBe(false);
-    });
-  });
-
-  describe('<area>', () => {
-    it('is interactive when href is present', () => {
-      expect(isNativeInteractive(makeNode('area', { href: '/map' }), getTextAttrValue)).toBe(true);
-    });
-
-    it('is NOT interactive without href', () => {
-      expect(isNativeInteractive(makeNode('area'), getTextAttrValue)).toBe(false);
-    });
-  });
-
-  describe('<audio> / <video>', () => {
-    it('<audio controls> is interactive', () => {
-      expect(isNativeInteractive(makeNode('audio', { controls: true }), getTextAttrValue)).toBe(
-        true
-      );
-    });
-
-    it('<video controls> is interactive', () => {
-      expect(isNativeInteractive(makeNode('video', { controls: true }), getTextAttrValue)).toBe(
-        true
-      );
-    });
-
-    it('<audio> without controls is NOT interactive', () => {
-      expect(isNativeInteractive(makeNode('audio'), getTextAttrValue)).toBe(false);
-    });
-
-    it('<video> without controls is NOT interactive', () => {
-      expect(isNativeInteractive(makeNode('video'), getTextAttrValue)).toBe(false);
-    });
-  });
-
-  describe('<object>', () => {
-    it('is NOT interactive (axobject-query has no entry for <object>)', () => {
-      expect(isNativeInteractive(makeNode('object'), getTextAttrValue)).toBe(false);
-    });
-  });
-
-  describe('<canvas>', () => {
-    it('is interactive (axobject CanvasRole widget; no-FP bias)', () => {
-      expect(isNativeInteractive(makeNode('canvas'), getTextAttrValue)).toBe(true);
-    });
-  });
-
-  describe('excluded elements (documented NOT-interactive)', () => {
-    it('<label> is NOT interactive (structure role, not widget)', () => {
-      expect(isNativeInteractive(makeNode('label'), getTextAttrValue)).toBe(false);
-    });
-
-    it('<menuitem> is NOT interactive (deprecated, dropped across browsers)', () => {
-      expect(isNativeInteractive(makeNode('menuitem'), getTextAttrValue)).toBe(false);
-    });
-  });
-
-  describe('non-interactive tags', () => {
-    for (const tag of ['div', 'span', 'p', 'section', 'article', 'header', 'footer', 'img']) {
-      it(`<${tag}> is not interactive`, () => {
-        expect(isNativeInteractive(makeNode(tag), getTextAttrValue)).toBe(false);
-      });
-    }
-  });
-
-  describe('tag normalization', () => {
-    it('lowercases tag names before classification', () => {
-      expect(isNativeInteractive(makeNode('BUTTON'), getTextAttrValue)).toBe(true);
-      expect(isNativeInteractive(makeNode('Input', { type: 'hidden' }), getTextAttrValue)).toBe(
-        false
-      );
-      expect(isNativeInteractive(makeNode('A', { href: '/x' }), getTextAttrValue)).toBe(true);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('returns false for missing tag', () => {
-      expect(isNativeInteractive({}, getTextAttrValue)).toBe(false);
-    });
-
-    it('returns false for non-string tag', () => {
-      expect(isNativeInteractive({ tag: null }, getTextAttrValue)).toBe(false);
-      expect(isNativeInteractive({ tag: 123 }, getTextAttrValue)).toBe(false);
-    });
-
-    it('returns false for empty-string tag', () => {
-      expect(isNativeInteractive({ tag: '' }, getTextAttrValue)).toBe(false);
-    });
-
-    it('handles nodes without attributes array (a/area without href)', () => {
-      expect(isNativeInteractive({ tag: 'a' }, getTextAttrValue)).toBe(false);
-      expect(isNativeInteractive({ tag: 'area' }, getTextAttrValue)).toBe(false);
-    });
-
-    it('handles nodes without attributes array (audio/video without controls)', () => {
-      expect(isNativeInteractive({ tag: 'audio' }, getTextAttrValue)).toBe(false);
-      expect(isNativeInteractive({ tag: 'video' }, getTextAttrValue)).toBe(false);
-    });
-  });
-});

From 15ea10eded33cf76874591de7e5f372263708ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Wed, 22 Apr 2026 10:01:24 +0200
Subject: [PATCH 3/9] refactor: consume #27's aria-query-derived
 INTERACTIVE_ROLES
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 lib/rules/template-no-invalid-interactive.js  |  23 +--
 lib/rules/template-no-nested-interactive.js   |  55 ++++---
 lib/utils/interactive-roles.js                | 127 ++++++++++++++++
 .../rules/template-no-invalid-interactive.js  |  19 ++-
 tests/lib/utils/interactive-roles-test.js     | 135 ++++++++++++++++++
 5 files changed, 315 insertions(+), 44 deletions(-)
 create mode 100644 lib/utils/interactive-roles.js
 create mode 100644 tests/lib/utils/interactive-roles-test.js

diff --git a/lib/rules/template-no-invalid-interactive.js b/lib/rules/template-no-invalid-interactive.js
index 6b98fd5b80..de21f3fe33 100644
--- a/lib/rules/template-no-invalid-interactive.js
+++ b/lib/rules/template-no-invalid-interactive.js
@@ -1,5 +1,6 @@
 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) {
   return node.attributes?.some((a) => a.name === name);
@@ -75,28 +76,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) {
diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index 1d5c156e09..c2b83f6e35 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/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';
 }
@@ -202,8 +208,17 @@ module.exports = {
             parentEntry.interactiveChildCount++;
           } else if (isAllowedDetailsChild(node, parentEntry)) {
             // flow content in the disclosed panel, or <summary> 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 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,
diff --git a/lib/utils/interactive-roles.js b/lib/utils/interactive-roles.js
new file mode 100644
index 0000000000..0c40e69ad4
--- /dev/null
+++ b/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;
+}
diff --git a/tests/lib/rules/template-no-invalid-interactive.js b/tests/lib/rules/template-no-invalid-interactive.js
index 62aed2fdff..85937d4639 100644
--- a/tests/lib/rules/template-no-invalid-interactive.js
+++ b/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
@@ -216,5 +218,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' },
+        },
+      ],
+    },
   ],
 });
diff --git a/tests/lib/utils/interactive-roles-test.js b/tests/lib/utils/interactive-roles-test.js
new file mode 100644
index 0000000000..a2574e71d8
--- /dev/null
+++ b/tests/lib/utils/interactive-roles-test.js
@@ -0,0 +1,135 @@
+'use strict';
+
+const {
+  INTERACTIVE_ROLES,
+  COMPOSITE_WIDGET_CHILDREN,
+} = require('../../../lib/utils/interactive-roles');
+
+describe('INTERACTIVE_ROLES', () => {
+  describe('canonical widget roles (ARIA 1.2 widget taxonomy)', () => {
+    for (const role of [
+      'button',
+      'checkbox',
+      'combobox',
+      'link',
+      'menuitem',
+      'menuitemcheckbox',
+      'menuitemradio',
+      'option',
+      'radio',
+      'scrollbar',
+      'searchbox',
+      'slider',
+      'spinbutton',
+      'switch',
+      'tab',
+      'textbox',
+      'treeitem',
+    ]) {
+      it(`includes "${role}"`, () => {
+        expect(INTERACTIVE_ROLES.has(role)).toBe(true);
+      });
+    }
+  });
+
+  describe('composite widget containers (widget-descended per aria-query)', () => {
+    for (const role of ['listbox', 'menu', 'menubar', 'grid', 'tablist', 'tree', 'treegrid']) {
+      it(`includes "${role}"`, () => {
+        expect(INTERACTIVE_ROLES.has(role)).toBe(true);
+      });
+    }
+  });
+
+  describe('manual override', () => {
+    it('includes "toolbar" (not widget-descended per aria-query; added per APG convention)', () => {
+      expect(INTERACTIVE_ROLES.has('toolbar')).toBe(true);
+    });
+  });
+
+  describe('manual exclusion', () => {
+    it('does NOT include "tooltip" (structure role per WAI-ARIA 1.2 §5.3.3)', () => {
+      expect(INTERACTIVE_ROLES.has('tooltip')).toBe(false);
+    });
+  });
+
+  describe('contested inclusions (documented divergences from peers)', () => {
+    it('includes "progressbar" (widget-descended per aria-query; diverges from lit-a11y which excludes it as readonly-valued)', () => {
+      expect(INTERACTIVE_ROLES.has('progressbar')).toBe(true);
+    });
+  });
+
+  describe('non-widget roles excluded', () => {
+    // Spot-check a handful of roles that should NOT be in the interactive set
+    // because they're abstract, structural, or landmark-typed.
+    for (const role of [
+      'article', // document-structure
+      'banner', // landmark
+      'main', // landmark
+      'navigation', // landmark
+      'region', // landmark
+      'complementary', // landmark
+      'contentinfo', // landmark
+      'form', // landmark
+      'search', // landmark (role, not element)
+      'heading', // document-structure
+      'img', // document-structure
+      'list', // document-structure
+      'listitem', // document-structure
+      'paragraph', // document-structure
+      'separator', // document-structure (context-dependent; aria-query taxonomy says structure)
+      'presentation', // role
+      'none', // role
+      'widget', // abstract — excluded by filter
+      'structure', // abstract — excluded by filter
+      'window', // abstract — excluded by filter
+    ]) {
+      it(`does NOT include "${role}"`, () => {
+        expect(INTERACTIVE_ROLES.has(role)).toBe(false);
+      });
+    }
+  });
+
+  describe('set size (drift detection)', () => {
+    // Pins the current set size to surface aria-query's taxonomy changes as
+    // visible diffs rather than silent shifts. Update this number (with a
+    // commit message naming which role was added/removed) when aria-query
+    // is bumped.
+    it('has 35 roles', () => {
+      expect(INTERACTIVE_ROLES.size).toBe(35);
+    });
+  });
+});
+
+describe('COMPOSITE_WIDGET_CHILDREN', () => {
+  it('is a Map', () => {
+    expect(COMPOSITE_WIDGET_CHILDREN).toBeInstanceOf(Map);
+  });
+
+  it('maps "listbox" to include "option"', () => {
+    expect(COMPOSITE_WIDGET_CHILDREN.get('listbox')?.has('option')).toBe(true);
+  });
+
+  it('maps "tablist" to include "tab"', () => {
+    expect(COMPOSITE_WIDGET_CHILDREN.get('tablist')?.has('tab')).toBe(true);
+  });
+
+  it('maps "tree" to include "treeitem"', () => {
+    expect(COMPOSITE_WIDGET_CHILDREN.get('tree')?.has('treeitem')).toBe(true);
+  });
+
+  it('maps "grid" to include "row" and transitively "gridcell"', () => {
+    const gridChildren = COMPOSITE_WIDGET_CHILDREN.get('grid');
+    expect(gridChildren?.has('row')).toBe(true);
+    expect(gridChildren?.has('gridcell')).toBe(true);
+  });
+
+  it('maps "treegrid" to include both grid-row and tree-treeitem (superClass inheritance)', () => {
+    const treeGridChildren = COMPOSITE_WIDGET_CHILDREN.get('treegrid');
+    expect(treeGridChildren?.has('row')).toBe(true);
+    expect(treeGridChildren?.has('treeitem')).toBe(true);
+  });
+
+  it('maps "radiogroup" to include "radio"', () => {
+    expect(COMPOSITE_WIDGET_CHILDREN.get('radiogroup')?.has('radio')).toBe(true);
+  });
+});

From af3556822b677d5058b77d54722a627ba3bc58f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Wed, 22 Apr 2026 13:55:24 +0200
Subject: [PATCH 4/9] fix: normalize <input type>, plumb ignoreUsemap, align
 contenteditable empty-string (Copilot review)

---
 lib/rules/template-no-invalid-interactive.js  | 15 ++++++++-----
 lib/rules/template-no-nested-interactive.js   | 21 ++++++++++++-------
 lib/utils/html-interactive-content.js         |  2 +-
 .../utils/html-interactive-content-test.js    | 12 +++++++++++
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/lib/rules/template-no-invalid-interactive.js b/lib/rules/template-no-invalid-interactive.js
index de21f3fe33..3d02c3ff7a 100644
--- a/lib/rules/template-no-invalid-interactive.js
+++ b/lib/rules/template-no-invalid-interactive.js
@@ -89,7 +89,7 @@ module.exports = {
       // 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)) {
+      if (isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap })) {
         return true;
       }
 
@@ -111,10 +111,15 @@ module.exports = {
         return true;
       }
 
-      // Check contenteditable
-      const ce = getTextAttr(node, 'contenteditable');
-      if (ce && ce !== 'false') {
-        return true;
+      // Check contenteditable. Per HTML spec, valid keywords are "true",
+      // "false", "plaintext-only", and the empty string (which is the default
+      // state, equivalent to "true"). So the attribute enables editing unless
+      // its value is "false".
+      if (hasAttr(node, 'contenteditable')) {
+        const ce = getTextAttr(node, 'contenteditable');
+        if (ce === undefined || ce === null || ce.trim().toLowerCase() !== 'false') {
+          return true;
+        }
       }
 
       // Check usemap (only on img/object)
diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index c2b83f6e35..3ce65ff006 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -143,10 +143,15 @@ module.exports = {
         return true;
       }
 
-      // Check contenteditable
-      const ce = getTextAttr(node, 'contenteditable');
-      if (ce && ce !== 'false') {
-        return true;
+      // Check contenteditable. Per HTML spec, valid keywords are "true",
+      // "false", "plaintext-only", and the empty string (which is the default
+      // state, equivalent to "true"). So the attribute enables editing unless
+      // its value is "false".
+      if (hasAttr(node, 'contenteditable')) {
+        const ce = getTextAttr(node, 'contenteditable');
+        if (ce === undefined || ce === null || ce.trim().toLowerCase() !== 'false') {
+          return true;
+        }
       }
 
       // <object usemap> — not in HTML §3.2.5.2.7 but upstream ember-template-lint
@@ -179,9 +184,11 @@ module.exports = {
       if (role && INTERACTIVE_ROLES.has(role)) {
         return false;
       }
-      const ce = getTextAttr(node, 'contenteditable');
-      if (ce && ce !== 'false') {
-        return false;
+      if (hasAttr(node, 'contenteditable')) {
+        const ce = getTextAttr(node, 'contenteditable');
+        if (ce === undefined || ce === null || ce.trim().toLowerCase() !== 'false') {
+          return false;
+        }
       }
       if ((tag === 'img' || tag === 'object') && hasAttr(node, 'usemap')) {
         return false;
diff --git a/lib/utils/html-interactive-content.js b/lib/utils/html-interactive-content.js
index 64268dc50c..8b6e4354a9 100644
--- a/lib/utils/html-interactive-content.js
+++ b/lib/utils/html-interactive-content.js
@@ -63,7 +63,7 @@ function isHtmlInteractiveContent(node, getTextAttrValue, options = {}) {
   // input — interactive unless type="hidden"
   if (tag === 'input') {
     const type = getTextAttrValue(node, 'type');
-    return type !== 'hidden';
+    return type === undefined || type === null || type.trim().toLowerCase() !== 'hidden';
   }
 
   // a — interactive only when href is present
diff --git a/tests/lib/utils/html-interactive-content-test.js b/tests/lib/utils/html-interactive-content-test.js
index afc3d6edc0..da9b8cebc6 100644
--- a/tests/lib/utils/html-interactive-content-test.js
+++ b/tests/lib/utils/html-interactive-content-test.js
@@ -53,6 +53,18 @@ describe('isHtmlInteractiveContent', () => {
         isHtmlInteractiveContent(makeNode('input', { type: 'hidden' }), getTextAttrValue)
       ).toBe(false);
     });
+
+    it('is NOT interactive when type="HIDDEN" (case-insensitive)', () => {
+      expect(
+        isHtmlInteractiveContent(makeNode('input', { type: 'HIDDEN' }), getTextAttrValue)
+      ).toBe(false);
+    });
+
+    it('is NOT interactive when type=" hidden " (whitespace-trimmed)', () => {
+      expect(
+        isHtmlInteractiveContent(makeNode('input', { type: ' hidden ' }), getTextAttrValue)
+      ).toBe(false);
+    });
   });
 
   describe('<a>', () => {

From daf30f55b0a20173e155ed5e546e36eb90b3eb6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Thu, 23 Apr 2026 21:34:13 +0200
Subject: [PATCH 5/9] sync: interactive-roles to canonical (use strict added)

---
 lib/utils/interactive-roles.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/utils/interactive-roles.js b/lib/utils/interactive-roles.js
index 0c40e69ad4..3814164154 100644
--- a/lib/utils/interactive-roles.js
+++ b/lib/utils/interactive-roles.js
@@ -1,3 +1,5 @@
+'use strict';
+
 const { roles } = require('aria-query');
 
 // Interactive ARIA roles — concrete roles whose taxonomy descends from `widget`
@@ -106,13 +108,17 @@ function buildCompositeWidgetChildren() {
     const out = new Set();
     const kids = direct.get(role);
     if (!kids) {
+      closed.set(role, out);
       return out;
     }
     for (const child of kids) {
       out.add(child);
       if (!visited.has(child)) {
-        visited.add(child);
-        for (const grandchild of expand(child, visited)) {
+        // Pass a fresh branch-specific visited set so sibling branches do not
+        // contaminate each other's traversal. A shared Set across branches
+        // makes memoized results order-dependent, because whether `child` is
+        // recursed into depends on which sibling ran first.
+        for (const grandchild of expand(child, new Set([...visited, child]))) {
           out.add(grandchild);
         }
       }

From b1e970d67f0f8988553485f6bed8e9eefa899027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Thu, 23 Apr 2026 21:39:56 +0200
Subject: [PATCH 6/9] docs: address Copilot review wording (PR #37)

---
 lib/rules/template-no-nested-interactive.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index 3ce65ff006..76cdebf3af 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -132,7 +132,9 @@ module.exports = {
       }
 
       // ARIA widget roles (author-declared interactivity — separate authority
-      // from HTML content-model; see `docs/architectural/interactive.md`).
+      // from HTML content-model: `html-interactive-content.js` speaks to the
+      // HTML §3.2.5.2.7 content model, while `interactive-roles.js` speaks to
+      // the WAI-ARIA 1.2 widget taxonomy).
       const role = getTextAttr(node, 'role');
       if (role && INTERACTIVE_ROLES.has(role)) {
         return true;

From c17ac2d9bbeb7464c2047fbbf1681f4b4cc93924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Thu, 23 Apr 2026 23:05:00 +0200
Subject: [PATCH 7/9] fix(template-no-nested-interactive): isMenuItemNode
 matches all three menu-item role variants (Copilot review)

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

diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index 76cdebf3af..b87ed30933 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/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,
diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 0d2ec90924..53a883c4ec 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/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}}

From aecd9ed069790901492fc3a2563f49ee5e254002 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Sun, 26 Apr 2026 10:07:23 +0200
Subject: [PATCH 8/9] chore(rules): add 'use strict' header to
 no-nested-interactive and no-invalid-interactive

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

diff --git a/lib/rules/template-no-invalid-interactive.js b/lib/rules/template-no-invalid-interactive.js
index 3d02c3ff7a..8498cc6bc2 100644
--- a/lib/rules/template-no-invalid-interactive.js
+++ b/lib/rules/template-no-invalid-interactive.js
@@ -1,3 +1,5 @@
+'use strict';
+
 const { isNativeElement } = require('../utils/is-native-element');
 const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index b87ed30933..92c5bb7255 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -1,3 +1,5 @@
+'use strict';
+
 const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 const { INTERACTIVE_ROLES, COMPOSITE_WIDGET_CHILDREN } = require('../utils/interactive-roles');
 

From 2bbcee06b553429cbbcf6d654139e8b304964f54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johan=20R=C3=B8ed?= <johanroed@gmail.com>
Date: Sun, 26 Apr 2026 11:07:31 +0200
Subject: [PATCH 9/9] fix(template-no-nested-interactive): guard canvas in
 isInteractiveOnlyFromTabindex; update docs

canvas is unconditionally interactive (added by PR #37 for drawing/game-UI
parity with upstream ember-template-lint). isInteractiveOnlyFromTabindex
was missing a canvas guard, so <canvas tabindex="0"> was incorrectly
treated as tabindex-only and never pushed onto the interactive stack,
meaning nested interactive content inside a canvas+tabindex was silently
allowed.

Also updates docs to list audio[controls], video[controls], and canvas as
interactive, and expands the Special Cases section to document the ARIA
composite-widget hierarchy exception introduced alongside this refactor.
---
 docs/rules/template-no-nested-interactive.md      |  8 ++++++--
 lib/rules/template-no-nested-interactive.js       |  3 +++
 tests/lib/rules/template-no-nested-interactive.js | 12 ++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/docs/rules/template-no-nested-interactive.md b/docs/rules/template-no-nested-interactive.md
index 1dfd28ef7e..12494776ec 100644
--- a/docs/rules/template-no-nested-interactive.md
+++ b/docs/rules/template-no-nested-interactive.md
@@ -15,7 +15,9 @@ This rule disallows nesting interactive elements inside other interactive elemen
 Interactive elements include:
 
 - `<a>` (only when it has an `href` attribute)
+- `<audio>` (only when it has a `controls` attribute)
 - `<button>`
+- `<canvas>` (drawing/game-UI convention; not in the HTML spec's interactive-content category)
 - `<details>`
 - `<embed>`
 - `<iframe>`
@@ -24,6 +26,7 @@ Interactive elements include:
 - `<select>`
 - `<summary>`
 - `<textarea>`
+- `<video>` (only when it has a `controls` attribute)
 - Elements with interactive ARIA roles (e.g., `role="button"`, `role="link"`)
 - Elements with `tabindex` (unless `ignoreTabindex` is enabled)
 - Elements with `contenteditable` (except `contenteditable="false"`)
@@ -32,8 +35,9 @@ Interactive elements include:
 Special cases:
 
 - `<label>` may contain **one** interactive child (e.g., `<label><input /></label>` is fine, but `<label><input /><button>x</button></label>` is not)
-- `<summary>` as the first child of `<details>` is allowed
-- Nested `role="menuitem"` elements are allowed (menu/sub-menu pattern)
+- `<summary>` as the first child of `<details>` is allowed; other interactive content after `<summary>` (in the disclosed panel) is also allowed
+- Canonical ARIA composite-widget hierarchies are allowed (e.g., `role="option"` inside `role="listbox"`, `role="tab"` inside `role="tablist"`, `role="row"` inside `role="grid"`, `role="radio"` inside `role="radiogroup"`). Derived from the ARIA `requiredOwnedElements` relationship.
+- Nested `role="menuitem"` / `role="menuitemcheckbox"` / `role="menuitemradio"` elements are allowed (menu/sub-menu pattern)
 
 ## Examples
 
diff --git a/lib/rules/template-no-nested-interactive.js b/lib/rules/template-no-nested-interactive.js
index 92c5bb7255..f82bf602d8 100644
--- a/lib/rules/template-no-nested-interactive.js
+++ b/lib/rules/template-no-nested-interactive.js
@@ -187,6 +187,9 @@ module.exports = {
       if (additionalInteractiveTags.has(tag)) {
         return false;
       }
+      if (tag === 'canvas') {
+        return false;
+      }
       if (isHtmlInteractiveContent(node, getTextAttr, { ignoreUsemap })) {
         return false;
       }
diff --git a/tests/lib/rules/template-no-nested-interactive.js b/tests/lib/rules/template-no-nested-interactive.js
index 53a883c4ec..920fd789f3 100644
--- a/tests/lib/rules/template-no-nested-interactive.js
+++ b/tests/lib/rules/template-no-nested-interactive.js
@@ -268,6 +268,12 @@ ruleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ messageId: 'nested' }],
     },
+    // <canvas> is interactive (drawing/game-UI convention); nesting fires even with tabindex.
+    {
+      code: '<template><canvas tabindex="0"><button>Click</button></canvas></template>',
+      output: null,
+      errors: [{ messageId: 'nested' }],
+    },
   ],
 });
 
@@ -454,5 +460,11 @@ hbsRuleTester.run('template-no-nested-interactive', rule, {
       output: null,
       errors: [{ message: 'Do not nest interactive element <video> inside <button>.' }],
     },
+    // <canvas> is interactive (drawing/game-UI convention); nesting fires even with tabindex.
+    {
+      code: '<canvas tabindex="0"><button>Click</button></canvas>',
+      output: null,
+      errors: [{ message: 'Do not nest interactive element <button> inside <canvas>.' }],
+    },
   ],
 });