refactor: reconcile native-interactive-elements via shared util

johanrd · johanrd · commit 9ba18c61151d · 2026-04-22T00:31:26.000+02:00
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.

## Decision table

The set is hand-curated because axobject-query disagrees with browser reality on several rows (notably audio/video unconditional-widget; &lt;menuitem&gt; 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.
- `&lt;object&gt;` — excluded. Earlier revision included it based on a misattributed axobject-query EmbeddedObjectRole citation; verification showed that role maps only to `&lt;embed&gt;`, not `&lt;object&gt;`. With no authoritative source backing inclusion, default to non-interactive.

## Consumers

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

Both rules' behavior is preserved for every case except `&lt;object&gt;` (no longer classified as interactive). Tests updated accordingly — `&lt;object usemap=""&gt;&lt;button&gt;` no longer flagged as nested-interactive.
diff --git a/lib/rules/template-no-invalid-interactive.js b/lib/rules/template-no-invalid-interactive.js
@@ -1,3 +1,5 @@
+const { isNativeInteractive } = require('../utils/native-interactive-elements');
+
 function hasAttr(node, name) {
   return node.attributes?.some((a) => a.name === name);
 }
@@ -71,19 +73,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',
@@ -106,7 +95,6 @@ module.exports = {
       'gridcell',
     ]);
 
-    // eslint-disable-next-line complexity
     function isInteractive(node) {
       const tag = node.tag?.toLowerCase();
       if (!tag) {
@@ -117,24 +105,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
@@ -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',
@@ -118,18 +108,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;
       }
 
@@ -171,10 +153,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
@@ -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
@@ -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>',
 
@@ -207,5 +214,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
@@ -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>
@@ -125,16 +138,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">
@@ -215,13 +218,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' }],
     },
@@ -303,6 +307,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: [
     {
@@ -375,33 +388,18 @@ 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>',
       output: null,
       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
