fix: use first-token ARIA role semantics per WAI-ARIA 1.2 §4.1 (Copilot review)

Author: johanrd

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

@@ -77,7 +77,17 @@ function roleStatus(node) {
     return 'unknown';
   }
   const tokens = attr.value.chars.trim().toLowerCase().split(/\s+/u);
-  return tokens.some((t) => INTERACTIVE_ROLES.has(t)) ? 'interactive' : 'non-interactive';
+  // First-match: find the first recognized token (interactive or non).
+  // Unrecognized tokens are skipped per WAI-ARIA 1.2 §4.1.
+  for (const t of tokens) {
+    if (INTERACTIVE_ROLES.has(t)) {
+      return 'interactive';
+    }
+    if (roles.has(t)) {
+      return 'non-interactive'; // first recognized non-interactive token
+    }
+  }
+  return 'non-interactive'; // no recognized tokens — treat as non-interactive
 }
 
 /** @type {import('eslint').Rule.RuleModule} */

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

@@ -75,6 +75,10 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
     '<template><span tabindex="-1">text</span></template>',
     '<template><section tabindex="-1">scroll target</section></template>',
     '<template><div tabindex={{-1}}></div></template>',
+
+    // WAI-ARIA 1.2 §4.1 role fallback: unrecognized first token is skipped,
+    // the next recognized token applies. `button` is interactive → allowed.
+    '<template><div role="foobar button" tabindex="0"></div></template>',
   ],
   invalid: [
     {
@@ -123,6 +127,13 @@ ruleTester.run('template-no-noninteractive-tabindex', rule, {
       output: null,
       errors: [{ messageId: 'noNonInteractiveTabindex' }],
     },
+    // WAI-ARIA 1.2 §4.1 role fallback: first recognized token wins.
+    // `region` is non-interactive → flagged; `button` (second token) is ignored.
+    {
+      code: '<template><div role="region button" tabindex="0"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noNonInteractiveTabindex' }],
+    },
   ],
 });