fix(template-no-invalid-interactive): switch shadowing detection to binding-based + normalize role (Copilot review)

- Byte-identical is-native-element: walk scope.variables up scope.upper
  instead of matching scope.references, so a bare helper reference like
  {{div}} that creates an entry in scope.references without binding an
  identifier does not incorrectly shadow the native <div> tag.
  Byte-identical to the carrier on PR #50.
- Add getRole() helper that trims, lowercases, and takes the first whitespace-
  separated token — mirrors template-no-nested-interactive / template-no-
  invalid-role normalization. isInteractive() now calls it so 'BUTTON',
  ' button ', and 'button link' all resolve to 'button' before INTERACTIVE_ROLES
  lookup.

Author: johanrd

lib/rules/template-no-invalid-interactive.js

@@ -12,6 +12,21 @@ function getTextAttr(node, name) {
   return undefined;
 }
 
+// ARIA role values are case-insensitive and the spec honors the first
+// recognised token when a space-separated fallback list is given
+// (WAI-ARIA 1.2 role attribute). Normalize via trim + lowercase + split on
+// whitespace + pick the first token; callers compare that against
+// INTERACTIVE_ROLES. Mirrors the getRole() helper in
+// template-no-nested-interactive / template-no-invalid-role for
+// consistency.
+function getRole(node) {
+  const raw = getTextAttr(node, 'role');
+  if (!raw) {
+    return raw;
+  }
+  return raw.trim().toLowerCase().split(/\s+/u)[0];
+}
+
 const DISALLOWED_DOM_EVENTS = new Set([
   // Mouse events:
   'click',
@@ -118,8 +133,10 @@ module.exports = {
         return true;
       }
 
-      // Check role
-      const role = getTextAttr(node, 'role');
+      // Check role — normalize via getRole() so that `role="BUTTON"`,
+      // `role=" button "`, and `role="button link"` all resolve to "button"
+      // before looking up against INTERACTIVE_ROLES.
+      const role = getRole(node);
       if (role && INTERACTIVE_ROLES.has(role)) {
         return true;
       }

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 —
@@ -60,16 +58,31 @@ function isNativeElement(node, sourceCode) {
   }
   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)) {
+  // Scope-shadowing detection: treat the tag as a component invocation only
+  // when its name resolves to an actual BINDING (const / let / import / block-
+  // param) in the enclosing scope chain — not just any reference. A bare
+  // reference like `{{div}}` (helper invocation elsewhere in the template)
+  // creates an entry in `scope.references` without binding a local
+  // identifier; it must not shadow the native `<div>` tag. Walking upward
+  // through `scope.upper` catches bindings declared in outer scopes — e.g.
+  // a module-level `const div = ...` shadowing templates deeper in the file.
+  if (firstPart && hasBindingInScopeChain(scope, firstPart.name)) {
     return false;
   }
   return true;
 }
 
+function hasBindingInScopeChain(scope, name) {
+  let current = scope;
+  while (current) {
+    if (current.variables && current.variables.some((v) => v.name === name)) {
+      return true;
+    }
+    current = current.upper;
+  }
+  return false;
+}
+
 /**
  * Inverse of {@link isNativeElement}. Returns true when the node should NOT
  * be treated as a native HTML element — either because it's a component