fix(template-no-aria-label-misuse): gate on isNativeElement to exclude custom/namespaced/shadowed tags (Copilot review)

Author: johanrd

lib/rules/template-no-aria-label-misuse.js

@@ -4,6 +4,7 @@
 // `roles.get(r).prohibitedProps` list drives the flag/allow decision.
 
 const { roles, elementRoles } = require('aria-query');
+const { isNativeElement } = require('../utils/is-native-element');
 
 function findAttr(node, name) {
   return node.attributes?.find((attr) => attr.name === name);
@@ -17,11 +18,6 @@ function getStaticAttrString(node, name) {
   return attr.value.chars;
 }
 
-function isHtmlElement(node) {
-  const tag = node.tag || '';
-  return /^[a-z]/.test(tag) && !tag.includes('.') && !tag.startsWith('@');
-}
-
 // Score how well an elementRoles entry matches the given node. Returns `null`
 // if any constraint fails; otherwise the number of satisfied conditions
 // (higher = more specific, used to pick the best match).
@@ -162,10 +158,16 @@ module.exports = {
 
   create(context) {
     const strictTabindex = Boolean(context.options[0]?.strictTabindex);
+    const sourceCode = context.sourceCode || context.getSourceCode();
 
     return {
       GlimmerElementNode(node) {
-        if (!isHtmlElement(node)) {
+        // Gate on `isNativeElement` to correctly exclude custom elements
+        // (<my-widget>), colon-namespaced tags (<svg:rect>), named blocks
+        // (<:slot>), PascalCase components, dotted/at-prefixed path tags,
+        // and scope-shadowed bindings. The previous first-char regex was
+        // permissive and misclassified custom elements as native HTML.
+        if (!isNativeElement(node, sourceCode)) {
           return;
         }
         if (isExplicitlyDecorative(node)) {

tests/lib/rules/template-no-aria-label-misuse.js

@@ -30,6 +30,13 @@ const validHbs = [
   '<div aria-label=""></div>',
   // Ember component — skipped (role unknowable).
   '<MyButton aria-label="x" />',
+  // Custom elements — not in HTML/SVG/MathML tag lists, skipped.
+  '<my-widget aria-label="x"></my-widget>',
+  '<emoji-picker aria-label="x"></emoji-picker>',
+  // Colon-namespaced tags (SVG DOM prefix form) — not enumerable, skipped.
+  '<svg:rect aria-label="x" />',
+  // Named blocks (Ember component API) — skipped.
+  '<:slot aria-label="x" />',
   // Elements with no aria-query entry — skipped ("when in doubt, don't flag").
   '<audio aria-label="silent"></audio>',
   '<input type="hidden" aria-label="x" />',