refactor: split native-interactive-elements into HTML-content-model authority

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.

Author: johanrd

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;
       }
 

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');

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 };

lib/utils/native-interactive-elements.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' },
-        },
-      ],
-    },
   ],
 });