refactor: align with #37's HTML-content-model authority split

Replace lib/utils/native-interactive-elements.js with
lib/utils/html-interactive-content.js to match the canonical util
introduced in #37. The new util cites HTML Living Standard §3.2.5.2.7
Interactive Content as its sole authority, resolving the previous
mixed-authority approach that cited axobject-query's widget taxonomy
for some rows and HTML spec for others.

Byte-identical copy of #37's util + test across worktrees so the two
PRs can land in either order without conflict.

Author: johanrd

lib/rules/template-no-role-presentation-on-focusable.js

@@ -16,7 +16,7 @@
 'use strict';
 
 const { isComponentInvocation } = require('../utils/is-component-invocation');
-const { isNativeInteractive } = require('../utils/native-interactive-elements');
+const { isHtmlInteractiveContent } = require('../utils/html-interactive-content');
 
 function findAttr(node, name) {
   return node.attributes?.find((a) => a.name === name);
@@ -49,7 +49,13 @@ function isFocusable(node) {
   if (findAttr(node, 'tabindex')) {
     return true;
   }
-  return isNativeInteractive(node, getTextAttrValue);
+  // <area href> is focusable (part of an image map's sequential focus order
+  // per HTML §6.6.3) but is not HTML §3.2.5.2.7 interactive content, so the
+  // shared util doesn't classify it. Rule-level special case.
+  if (typeof node.tag === 'string' && node.tag.toLowerCase() === 'area') {
+    return Boolean(findAttr(node, 'href'));
+  }
+  return isHtmlInteractiveContent(node, getTextAttrValue);
 }
 
 /** @type {import('eslint').Rule.RuleModule} */

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

@@ -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);
+    });
+  });
+});