refactor: adopt isComponentInvocation util; keep rule-specific interactive-tag derivation

Adopt the shared `isComponentInvocation` util for the component-skip in
`template-no-interactive-element-to-noninteractive-role`. The rule-specific
layered derivation (aria-query `elementRoles` primary, axobject-query
fallback, with canvas and audio/video-without-controls carve-outs) is
retained — it is narrower than `isNativeInteractive` because this rule
targets inherent-interactive tags per HTML-AAM (demotion via
non-interactive role) rather than conditionally-interactive tags.

Also carry `native-interactive-elements.js` (+ tests) into this branch
for Z-1 merge cleanliness, even though this rule does not adopt it.

Author: johanrd

lib/rules/template-no-interactive-element-to-noninteractive-role.js

@@ -1,6 +1,7 @@
 const { roles, elementRoles } = require('aria-query');
 const { AXObjects, elementAXObjects } = require('axobject-query');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
+const { isComponentInvocation } = require('../utils/is-component-invocation');
 
 // Interactive-element derivation. Mirrors jsx-a11y's layered approach:
 //   1. Primary signal — aria-query's `elementRoles`: an element is inherently
@@ -13,6 +14,15 @@ const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
 //      elements whose AXObject is a widget but aria-query lists no inherent
 //      ARIA role (e.g. <summary>, <menuitem>, <embed>).
 //
+// Why we do NOT use the shared `isNativeInteractive` util here:
+//   Keep the rule's layered aria-query + axobject-query derivation — this
+//   rule's scope is narrower than `isNativeInteractive`. We care about tags
+//   that have INHERENT interactive semantics per HTML-AAM (so that applying
+//   a non-interactive role is a demotion). `isNativeInteractive` also treats
+//   tags with conditional interactivity (a[href], audio[controls]) as
+//   interactive in a way that wouldn't make sense here without the
+//   conditional context.
+//
 // Deviations from jsx-a11y, driven by real-world false-positive patterns:
 //   - `<canvas>` is NOT treated as inherently interactive. Its AXObject is
 //     `CanvasRole` (widget), but per aria-query `<canvas>` has no inherent
@@ -205,6 +215,11 @@ module.exports = {
   create(context) {
     return {
       GlimmerElementNode(node) {
+        // Skip component invocations — the rule targets native HTML elements.
+        if (isComponentInvocation(node)) {
+          return;
+        }
+
         if (!isInteractiveElement(node)) {
           return;
         }

lib/utils/is-component-invocation.js

@@ -0,0 +1,24 @@
+'use strict';
+
+/**
+ * Returns true if the Glimmer element node is a component invocation
+ * rather than a native HTML element. Excludes:
+ * - PascalCase tags (<Button>, <MyWidget>)
+ * - Named-arg invocations (<@heading>, <@tag.foo>)
+ * - This-path invocations (<this.myComponent>, <this.comp.sub>)
+ * - Dot-path invocations (<foo.bar>)
+ * - Named-block syntax (<foo::bar>)
+ */
+module.exports.isComponentInvocation = function isComponentInvocation(node) {
+  const tag = node?.tag;
+  if (typeof tag !== 'string') {
+    return false;
+  }
+  return (
+    /^[A-Z]/.test(tag) ||
+    tag.startsWith('@') ||
+    tag.startsWith('this.') ||
+    tag.includes('.') ||
+    tag.includes('::')
+  );
+};

lib/utils/native-interactive-elements.js

@@ -0,0 +1,89 @@
+'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?".
+ *
+ * The set is hand-curated rather than derived from a single authority because
+ * aria-query, axobject-query, HTML-AAM, WAI-ARIA, and browser reality disagree on
+ * several rows. Decision rationale is documented per-tag:
+ *
+ * | Element                                         | Behavior             | Rationale |
+ * |-------------------------------------------------|----------------------|-----------|
+ * | button, select, textarea, iframe, embed,        | Interactive          | aria-query/axobject-query widget + universally-accepted |
+ * | summary, details                                |                      |           |
+ * | input (except type=hidden)                      | Interactive          | Same as above, minus hidden |
+ * | option, datalist                                | Interactive          | aria-query roles option/listbox; axobject widget; HTML-AAM |
+ * | a[href], area[href]                             | Interactive (cond.)  | HTML-AAM: anchor interactivity requires href |
+ * | audio[controls], video[controls]                | Interactive          | Browsers only render focusable UI with `controls` |
+ * | audio, video (no controls)                      | NOT interactive      | No keyboard semantics without controls; browsers agree |
+ * | object                                          | Interactive          | axobject-query EmbeddedObjectRole |
+ * | canvas                                          | Interactive          | axobject-query CanvasRole widget; bias toward no-FP |
+ * | input[type=hidden]                              | NOT interactive      | HTML spec: no UI, no focus, no AT exposure |
+ * | menuitem                                        | NOT interactive      | Deprecated; no longer rendered in Chrome/Edge/Safari/FF |
+ * | label                                           | NOT interactive      | axobject-query LabelRole is structure, not widget |
+ */
+
+// Unconditionally-interactive HTML tags (no attribute dependencies).
+const UNCONDITIONAL_INTERACTIVE_TAGS = new Set([
+  'button',
+  'select',
+  'textarea',
+  'iframe',
+  'embed',
+  'summary',
+  'details',
+  'option',
+  'datalist',
+  'object',
+  '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,
+};

tests/lib/utils/is-component-invocation-test.js

@@ -0,0 +1,68 @@
+'use strict';
+
+const { isComponentInvocation } = require('../../../lib/utils/is-component-invocation');
+
+describe('isComponentInvocation', () => {
+  it('returns true for PascalCase tags', () => {
+    expect(isComponentInvocation({ tag: 'Button' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'MyWidget' })).toBe(true);
+    // PascalCase tags that match a native HTML element name — the core bug case
+    expect(isComponentInvocation({ tag: 'Article' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Form' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Main' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Nav' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Ul' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Li' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Aside' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Section' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Table' })).toBe(true);
+  });
+
+  it('returns false for lowercase native HTML tags', () => {
+    expect(isComponentInvocation({ tag: 'div' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'article' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'form' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'h1' })).toBe(false);
+    expect(isComponentInvocation({ tag: 'button' })).toBe(false);
+  });
+
+  it('returns true for named-arg invocations', () => {
+    expect(isComponentInvocation({ tag: '@heading' })).toBe(true);
+    expect(isComponentInvocation({ tag: '@tag.foo' })).toBe(true);
+  });
+
+  it('returns true for this-path invocations', () => {
+    expect(isComponentInvocation({ tag: 'this.myComponent' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'this.comp.sub' })).toBe(true);
+  });
+
+  it('returns true for dot-path invocations', () => {
+    expect(isComponentInvocation({ tag: 'foo.bar' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'ns.widget' })).toBe(true);
+  });
+
+  it('returns true for named-block / namespaced invocations', () => {
+    expect(isComponentInvocation({ tag: 'foo::bar' })).toBe(true);
+    expect(isComponentInvocation({ tag: 'Foo::Bar' })).toBe(true);
+  });
+
+  it('returns false for empty-string tag', () => {
+    expect(isComponentInvocation({ tag: '' })).toBe(false);
+  });
+
+  it('returns false for undefined node', () => {
+    expect(isComponentInvocation()).toBe(false);
+    expect(isComponentInvocation(undefined)).toBe(false);
+    expect(isComponentInvocation(null)).toBe(false);
+  });
+
+  it('returns false for node with undefined tag', () => {
+    expect(isComponentInvocation({})).toBe(false);
+    expect(isComponentInvocation({ tag: undefined })).toBe(false);
+  });
+
+  it('returns false for node with non-string tag', () => {
+    expect(isComponentInvocation({ tag: 123 })).toBe(false);
+    expect(isComponentInvocation({ tag: null })).toBe(false);
+  });
+});

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 interactive (axobject EmbeddedObjectRole)', () => {
+      expect(isNativeInteractive(makeNode('object'), getTextAttrValue)).toBe(true);
+    });
+  });
+
+  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);
+    });
+  });
+});