feat: gate template-no-noninteractive-element-to-interactive-role on isNativeElement

Add is-native-element util and guard the rule against PascalCase
components whose lowercased tag name collides with a NON_INTERACTIVE_TAGS
entry (e.g. `<Article>` was misclassified as native `<article>` because
the existing tag normalization used `node.tag?.toLowerCase()`).
Regression tests added for `<Article role="button">` and
`<Section role="tab">`.

Author: johanrd

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

@@ -1,6 +1,7 @@
 const { elementRoles, roles } = require('aria-query');
 const { AXObjects, elementAXObjects } = require('axobject-query');
 const { INTERACTIVE_ROLES } = require('../utils/interactive-roles');
+const { isNativeElement } = require('../utils/is-native-element');
 
 // Elements with inherent non-interactive accessibility-tree semantics. We
 // union two derivations to match jsx-a11y's `isNonInteractiveElement`
@@ -118,8 +119,16 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
     return {
       GlimmerElementNode(node) {
+        // PascalCase tags like `<Article>` collide with lowercase native tags
+        // when naively lowercased for the NON_INTERACTIVE_TAGS lookup. Gate
+        // on `isNativeElement` so components and scope-shadowed bindings are
+        // filtered out before we classify the element.
+        if (!isNativeElement(node, sourceCode)) {
+          return;
+        }
         const tag = node.tag?.toLowerCase();
         if (!tag || !NON_INTERACTIVE_TAGS.has(tag)) {
           return;

lib/utils/is-native-element.js

@@ -0,0 +1,83 @@
+'use strict';
+
+const htmlTags = require('html-tags');
+const svgTags = require('svg-tags');
+const { mathmlTagNames } = require('mathml-tag-names');
+
+// Authoritative set of native element tag names. Mirrors the approach
+// established by #2689 (template-no-block-params-for-html-elements), which
+// the maintainer requires for component-vs-element discrimination in this
+// plugin. Heuristic approaches (PascalCase detection, etc.) were explicitly
+// rejected there because a lowercase tag CAN be a component in GJS/GTS when
+// the name is bound in scope (e.g. `const div = MyComponent; <div />`).
+const ELEMENT_TAGS = new Set([...htmlTags, ...svgTags, ...mathmlTagNames]);
+
+/**
+ * Returns true if the Glimmer element node is a native HTML / SVG / MathML
+ * element — i.e. the tag name is in the authoritative list AND is not
+ * shadowed by an in-scope binding.
+ *
+ * "Native" here means **spec-registered tag name** (in the HTML, SVG, or
+ * MathML spec registries, reached via the `html-tags` / `svg-tags` /
+ * `mathml-tag-names` packages). It is NOT the same as:
+ *
+ *  - "native accessibility" / "widget-ness" — see `interactive-roles.js`
+ *    (aria-query widget taxonomy; an ARIA-tree-semantics question)
+ *  - "native interactive content" / "focus behavior" — see
+ *    `html-interactive-content.js` (HTML §3.2.5.2.7; an HTML-content-model
+ *    question about which tags can be nested inside what)
+ *  - "natively focusable" / sequential-focus — see HTML §6.6.3
+ *
+ * This util answers only: "is this tag a first-class built-in element of one
+ * of the three markup-language standards, rather than a component invocation
+ * or a shadowed local binding?" Callers compose it with the other utils
+ * above when they need a more specific question (see e.g. `template-no-
+ * noninteractive-tabindex`, which consults both this and
+ * `html-interactive-content`).
+ *
+ * Returns false for:
+ *  - components (PascalCase, dotted, @-prefixed, this.-prefixed, ::-namespaced —
+ *    none of these tag names appear in the HTML/SVG/MathML lists)
+ *  - custom elements (`<my-widget>`) — accepted false negative; the web-
+ *    components namespace is open and can't be enumerated
+ *  - scope-bound identifiers (`<div>` when `div` is a local `let` / `const` /
+ *    import / block-param in the enclosing scope)
+ *
+ * @param {object} node - GlimmerElementNode
+ * @param {object} [sourceCode] - ESLint SourceCode, for scope lookup. When
+ *   omitted, the scope check is skipped (the result is then list-based only —
+ *   suitable for unit tests).
+ */
+function isNativeElement(node, sourceCode) {
+  if (!node || typeof node.tag !== 'string') {
+    return false;
+  }
+  if (!ELEMENT_TAGS.has(node.tag)) {
+    return false;
+  }
+  if (!sourceCode || !node.parent) {
+    return true;
+  }
+  const scope = sourceCode.getScope(node.parent);
+  const firstPart = node.parts && node.parts[0];
+  // Compare by identifier name rather than AST node object identity — object
+  // identity isn't guaranteed across parser versions (ember-eslint-parser can
+  // produce distinct node objects for the same token depending on how the
+  // scope manager walks the tree), but the resolved `.name` is stable.
+  if (firstPart && scope.references.some((ref) => ref.identifier?.name === firstPart?.name)) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Inverse of {@link isNativeElement}. Returns true when the node should NOT
+ * be treated as a native HTML element — either because it's a component
+ * invocation (PascalCase, dotted, @-prefixed, this.-prefixed, custom element)
+ * OR a tag name that's shadowed by a scope binding.
+ */
+function isComponentInvocation(node, sourceCode) {
+  return !isNativeElement(node, sourceCode);
+}
+
+module.exports = { isNativeElement, isComponentInvocation, ELEMENT_TAGS };

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

@@ -32,6 +32,13 @@ ruleTester.run('template-no-noninteractive-element-to-interactive-role', rule, {
     // Components — rule skips.
     '<template><CustomHeading role="button" /></template>',
 
+    // PascalCase component whose lowercased tag name collides with a
+    // NON_INTERACTIVE_TAGS entry. Naive tag?.toLowerCase() would have
+    // misclassified <Article> as native <article>; isNativeElement filters
+    // it out as a component invocation.
+    '<template><Article role="button" /></template>',
+    '<template><Section role="tab" /></template>',
+
     // Unknown role — rule skips.
     '<template><h1 role="fakerole">Title</h1></template>',