fix(template-no-noninteractive-tabindex): walk role tokens for first recognised role per ARIA §4.1 (Copilot review)

Author: johanrd

lib/rules/template-no-noninteractive-tabindex.js

@@ -174,11 +174,23 @@ module.exports = {
         // tabindex="0" when the panel's content isn't itself focusable, so
         // keyboard users can page through panels. jsx-a11y's recommended
         // default exempts `tabpanel` for the same reason.
+        //
+        // Walk tokens for the first RECOGNISED role (ARIA 1.2 §4.1 role-
+        // fallback), matching the `roleStatus()` helper above. This is
+        // consistent with the rule's own role-walk logic and matches browser
+        // behavior: `role="xxyxyz tabpanel"` resolves to `tabpanel` because
+        // UAs skip unknown tokens. LLM-generated templates sometimes emit
+        // such sequences; honoring spec fallback prevents false positives.
         const roleAttr = findAttr(node, 'role');
         if (roleAttr?.value?.type === 'GlimmerTextNode') {
-          const firstToken = roleAttr.value.chars.trim().toLowerCase().split(/\s+/u)[0];
-          if (allowedRoles.has(firstToken)) {
-            return;
+          const tokens = roleAttr.value.chars.trim().toLowerCase().split(/\s+/u);
+          for (const token of tokens) {
+            if (roles.has(token)) {
+              if (allowedRoles.has(token)) {
+                return;
+              }
+              break; // first recognised role wins; further tokens are fallbacks
+            }
           }
         }
 

tests/lib/rules/template-no-noninteractive-tabindex.js

@@ -37,6 +37,12 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
     '<template><div role="tabpanel" tabindex="0"></div></template>',
     '<template><section role="tabpanel" tabindex="0" aria-labelledby="tab-1">Content</section></template>',
 
+    // Role-fallback list with unknown leading token — UAs walk to the first
+    // recognised token (`tabpanel`) per WAI-ARIA §4.1. The allowlist match
+    // should honor the same fallback. (LLM guardrail: models sometimes
+    // emit speculative-fallback sequences like this.)
+    '<template><div role="xxyxyz tabpanel" tabindex="0"></div></template>',
+
     // Config: allow additional non-interactive roles.
     {
       code: '<template><div role="region" tabindex="0" aria-label="Scroll area"></div></template>',