fix(template-no-interactive-element-to-noninteractive-role): scope-aware skip + docs + tests (Copilot review)

- Switch rule to isNativeElement(node, sourceCode) so scope-bound lowercase
  tags (`const button = BtnCmp; <button>`) are skipped as components.
- Add a strict-mode valid test case for that shadowing scenario.
- Clarify is-native-element JSDoc (byte-identical to PR #50 canonical,
  drops the stale 'template-no-noninteractive-tabindex' example).
- Update COMPOSITE_WIDGET_CHILDREN comment in interactive-roles.js to
  say 'planned future use' — no consumer wires the nested-interactive
  exception in yet.

Author: johanrd

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

@@ -1,7 +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');
+const { isNativeElement } = require('../utils/is-native-element');
 
 // Interactive-element derivation. Mirrors jsx-a11y's layered approach:
 //   1. Primary signal — aria-query's `elementRoles`: an element is inherently
@@ -229,10 +229,15 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
     return {
       GlimmerElementNode(node) {
-        // Skip component invocations — the rule targets native HTML elements.
-        if (isComponentInvocation(node)) {
+        // Only run on native HTML elements — in strict GJS a lowercase tag can
+        // be shadowed by an in-scope local binding (e.g. `const button = Btn;
+        // <button>`) and that's a component invocation, not a native element.
+        // `isNativeElement` combines the authoritative html/svg/mathml tag
+        // lists with scope-shadowing detection.
+        if (!isNativeElement(node, sourceCode)) {
           return;
         }
 

lib/utils/interactive-roles.js

@@ -35,9 +35,12 @@ module.exports.INTERACTIVE_ROLES = buildInteractiveRoleSet();
 // `row` owns `gridcell` / `columnheader` / `rowheader`, so `grid` transitively
 // allows all of them).
 //
-// This drives the nested-interactive exception so canonical composite-widget
-// patterns (`listbox > option`, `tablist > tab`, `tree > treeitem`,
-// `grid > row > gridcell`, `radiogroup > radio`, etc.) are not flagged.
+// Planned future use: a nested-interactive exception so canonical composite-
+// widget patterns (`listbox > option`, `tablist > tab`, `tree > treeitem`,
+// `grid > row > gridcell`, `radiogroup > radio`, etc.) would not be flagged.
+// No consumer wires this in yet — export is kept stable for the pending
+// rule update. Computation is cheap enough to leave eager rather than
+// lazy-getter-ify it.
 module.exports.COMPOSITE_WIDGET_CHILDREN = buildCompositeWidgetChildren();
 
 function buildInteractiveRoleSet() {

lib/utils/is-native-element.js

@@ -21,19 +21,17 @@ const ELEMENT_TAGS = new Set([...htmlTags, ...svgTags, ...mathmlTagNames]);
  * 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)
+ *  - "native accessibility" / "widget-ness" — an ARIA-tree-semantics
+ *    question (for example, whether something maps to a widget role)
+ *  - "native interactive content" / "focus behavior" — an HTML content-model
+ *    question about which elements are considered interactive in the spec
  *  - "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`).
+ * or a shadowed local binding?" Callers should combine it with whatever
+ * accessibility, interactivity, or focusability checks they need for more
+ * specific questions.
  *
  * Returns false for:
  *  - components (PascalCase, dotted, @-prefixed, this.-prefixed, ::-namespaced —

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

@@ -30,6 +30,11 @@ ruleTester.run('template-no-interactive-element-to-noninteractive-role', rule, {
     // Components — rule skips (not a DOM element).
     '<template><CustomBtn role="article" /></template>',
 
+    // Scope-bound lowercase tag — `<button>` here is a local binding, so it
+    // resolves to a component invocation (not a native interactive element)
+    // and the rule must skip it even with a non-interactive role attribute.
+    'const button = ButtonComponent;\n<template><button role="article" /></template>',
+
     // Unknown role — rule skips.
     '<template><button role="fakerole">Click</button></template>',