fix(template-no-invalid-role): flag empty / whitespace-only role attribute

Previously the rule early-returned when the trimmed role value was empty,
silently accepting `<div role="">` and `<div role="   ">`. Both jsx-a11y
and vue-a11y flag these — they're authoring mistakes, not no-ops, since
the attribute is malformed (no recognized role token) and supplies zero
ARIA semantics while still appearing in the DOM.

Replace the early-return with a single 'invalid' report (role rendered
as the empty string in the message), keeping the existing error format
intact. No new messageId; the existing 'invalid' template renders the
empty value clearly.

Tests: move `role=""` from valid to invalid; add `role="   "` for
parity with the trim-then-flag path. Documented as ports of the audit-
fixture divergence cases that previously pinned the under-flag behavior.

Author: johanrd

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

@@ -155,16 +155,23 @@ module.exports = {
           return;
         }
 
+        // ARIA role attribute is a whitespace-separated list of tokens
+        // (role-fallback pattern per ARIA 1.2 §5.4). An empty / whitespace-
+        // only value supplies zero tokens — flag as `role=""` to catch the
+        // authoring mistake (matches jsx-a11y / vue-a11y).
         const raw = roleAttr.value.chars.trim();
         if (!raw) {
+          context.report({
+            node: roleAttr,
+            messageId: 'invalid',
+            data: { role: '' },
+          });
           return;
         }
 
-        // ARIA role attribute is a whitespace-separated list of tokens
-        // (role-fallback pattern per ARIA 1.2 §5.4). Validate each token.
-        // Keep the original casing alongside the normalized (lowercase) form
-        // so reported-back tokens preserve author intent — the validation
-        // is case-insensitive, the ERROR MESSAGE isn't.
+        // Validate each token. Keep the original casing alongside the
+        // normalized (lowercase) form so reported tokens preserve author
+        // intent — validation is case-insensitive, the ERROR MESSAGE isn't.
         const rawTokens = raw.split(/\s+/u);
         const tokens = rawTokens.map((t) => t.toLowerCase());
 

tests/lib/rules/template-no-invalid-role.js

@@ -94,11 +94,6 @@ ruleTester.run('template-no-invalid-role', rule, {
     '<template><div role="associationlistitemvalue"></div></template>',
     '<template><div role="comment"></div></template>',
     '<template><div role="suggestion"></div></template>',
-
-    // Documented divergence — empty role string. jsx-a11y / vue-a11y flag
-    // it; our rule early-returns on empty/whitespace role values, so we
-    // don't. Pin our current behavior.
-    '<template><div role=""></div></template>',
   ],
 
   invalid: [
@@ -110,6 +105,19 @@ ruleTester.run('template-no-invalid-role', rule, {
       output: null,
       errors: [{ messageId: 'invalid' }],
     },
+    // Empty / whitespace-only role attribute supplies no recognized role
+    // token — flag as an authoring mistake. Aligns with jsx-a11y and
+    // vue-a11y (both flag).
+    {
+      code: '<template><div role=""></div></template>',
+      output: null,
+      errors: [{ messageId: 'invalid' }],
+    },
+    {
+      code: '<template><div role="   "></div></template>',
+      output: null,
+      errors: [{ messageId: 'invalid' }],
+    },
     {
       code: `<template>
         <div role="invalid">Content</div>