fix(template-no-aria-label-misuse): walk role tokens for first recognised role per ARIA §4.1 (Copilot review)

Author: johanrd

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

@@ -84,13 +84,19 @@ function getRole(node) {
     if (explicit === null) {
       return null;
     }
-    const first = explicit.trim().split(/\s+/)[0]?.toLowerCase();
-    if (first && roles.has(first)) {
-      return first;
+    // Walk the whitespace-separated token list for the first RECOGNISED
+    // role, matching WAI-ARIA §4.1 role-fallback semantics — UAs skip
+    // unknown tokens and pick the first they implement. `role="xxyxyz
+    // button"` resolves to `button`; later tokens are graceful-degradation
+    // fallbacks. Unknown-only lists fall through to the implicit role.
+    const tokens = explicit.trim().toLowerCase().split(/\s+/u);
+    for (const token of tokens) {
+      if (token && roles.has(token)) {
+        return token;
+      }
     }
-    // `role` present with an unknown token (e.g. `role="bogus"`) — per ARIA
-    // the invalid value is ignored and the implicit role applies. Fall
-    // through to the implicit-role lookup.
+    // `role` present but no recognised token (e.g. `role="bogus"`) — per
+    // ARIA, invalid values are ignored and the implicit role applies.
   }
   return getImplicitRole(node);
 }

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

@@ -48,6 +48,10 @@ const validHbs = [
   // false-flag against the element's implicit role.
   '<div role={{this.role}} aria-label="x">x</div>',
   '<span role={{this.role}} aria-labelledby="t">x</span>',
+  // Role-fallback: UAs walk unknown leading tokens to the first recognised
+  // role per WAI-ARIA §4.1. `role="xxyxyz button"` resolves to `button`,
+  // which accepts aria-label — should not flag.
+  '<div role="xxyxyz button" aria-label="Custom">x</div>',
 ];
 
 const invalidHbs = [