fix(template-no-invalid-role): source valid roles from aria-query; support DPUB-/Graphics-ARIA and role-fallback lists

Two related fixes, shared rewrite.

1. Replace the hand-maintained VALID_ROLES (~90 WAI-ARIA 1.2 tokens)
   with a derived list from aria-query (concrete — non-abstract — role
   keys), plus a small ARIA 1.3 draft-role allowlist that aria-query
   doesn't yet ship.

   Effect: DPUB-ARIA roles (doc-abstract, doc-chapter, …) and
   Graphics-ARIA roles (graphics-document, graphics-object,
   graphics-symbol) are no longer flagged as invalid.

2. Split the role value on whitespace before validating. A role
   attribute is a list of tokens per ARIA 1.2 §5.4 (role fallback).
   Each token must individually be valid.

   Effect: role="tabpanel row", role="doc-appendix doc-bibliography",
   and role="graphics-document document" now pass; role="tabpanel
   row foobar" flags the first invalid token ("foobar") instead of
   rejecting the whole string as one opaque role name.

Error message now names the specific offending token. Three existing
invalid tests updated accordingly (previously expected the whole
string; now the specific token).

Ten new valid tests cover DPUB/Graphics and the fallback-list shape.

Author: johanrd

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

@@ -1,92 +1,19 @@
-const VALID_ROLES = new Set([
-  'alert',
-  'alertdialog',
-  'application',
-  'article',
+const { roles } = require('aria-query');
+
+// Valid ARIA roles = concrete (non-abstract) entries from aria-query, plus a
+// small set of WAI-ARIA 1.3 draft roles that aria-query doesn't yet ship. The
+// ARIA 1.2 base roles, DPUB-ARIA (doc-*), and Graphics-ARIA (graphics-*) all
+// come from aria-query.
+const ARIA_13_DRAFT_ROLES = [
   'associationlist',
   'associationlistitemkey',
   'associationlistitemvalue',
-  'banner',
-  'blockquote',
-  'button',
-  'caption',
-  'cell',
-  'checkbox',
-  'code',
-  'columnheader',
-  'combobox',
   'comment',
-  'complementary',
-  'contentinfo',
-  'definition',
-  'deletion',
-  'dialog',
-  'directory',
-  'document',
-  'emphasis',
-  'feed',
-  'figure',
-  'form',
-  'generic',
-  'grid',
-  'gridcell',
-  'group',
-  'heading',
-  'img',
-  'insertion',
-  'link',
-  'list',
-  'listbox',
-  'listitem',
-  'log',
-  'main',
-  'mark',
-  'marquee',
-  'math',
-  'menu',
-  'menubar',
-  'menuitem',
-  'menuitemcheckbox',
-  'menuitemradio',
-  'meter',
-  'navigation',
-  'none',
-  'note',
-  'option',
-  'paragraph',
-  'presentation',
-  'progressbar',
-  'radio',
-  'radiogroup',
-  'region',
-  'row',
-  'rowgroup',
-  'rowheader',
-  'scrollbar',
-  'search',
-  'searchbox',
-  'separator',
-  'slider',
-  'spinbutton',
-  'status',
-  'strong',
-  'subscript',
   'suggestion',
-  'superscript',
-  'switch',
-  'tab',
-  'table',
-  'tablist',
-  'tabpanel',
-  'term',
-  'textbox',
-  'time',
-  'timer',
-  'toolbar',
-  'tooltip',
-  'tree',
-  'treegrid',
-  'treeitem',
+];
+const VALID_ROLES = new Set([
+  ...[...roles.keys()].filter((role) => !roles.get(role).abstract),
+  ...ARIA_13_DRAFT_ROLES,
 ]);
 
 // Elements with semantic meaning that should not be given role="presentation" or role="none"
@@ -225,34 +152,38 @@ module.exports = {
           return;
         }
 
-        const role = roleAttr.value.chars.trim();
-        if (!role) {
+        const raw = roleAttr.value.chars.trim();
+        if (!raw) {
           return;
         }
 
-        const roleLower = role.toLowerCase();
+        // ARIA role attribute is a whitespace-separated list of tokens
+        // (role-fallback pattern per ARIA 1.2 §5.4). Validate each token.
+        const tokens = raw.split(/\s+/u).map((t) => t.toLowerCase());
 
-        // Check for nonexistent roles
-        if (catchNonexistentRoles && !VALID_ROLES.has(roleLower)) {
-          context.report({
-            node: roleAttr,
-            messageId: 'invalid',
-            data: { role },
-          });
-          return;
+        if (catchNonexistentRoles) {
+          const invalidToken = tokens.find((token) => !VALID_ROLES.has(token));
+          if (invalidToken) {
+            context.report({
+              node: roleAttr,
+              messageId: 'invalid',
+              data: { role: invalidToken },
+            });
+            return;
+          }
         }
 
         // Check for presentation/none role on semantic elements (case-insensitive per WAI-ARIA 1.2:
         // "Case-sensitivity of the comparison inherits from the case-sensitivity of the host language"
         // and HTML is case-insensitive — https://www.w3.org/TR/wai-aria-1.2/#document-handling_author-errors_roles)
         if (
-          (roleLower === 'presentation' || roleLower === 'none') &&
+          tokens.some((t) => t === 'presentation' || t === 'none') &&
           SEMANTIC_ELEMENTS.has(node.tag)
         ) {
           context.report({
             node: roleAttr,
             messageId: 'presentationOnSemantic',
-            data: { role, tag: node.tag },
+            data: { role: raw, tag: node.tag },
           });
         }
       },

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

@@ -71,6 +71,20 @@ ruleTester.run('template-no-invalid-role', rule, {
       code: '<template><div role="command interface"></div></template>',
       options: [{ catchNonexistentRoles: false }],
     },
+
+    // DPUB-ARIA (doc-*) and Graphics-ARIA (graphics-*) are in the WAI-ARIA
+    // ecosystem via aria-query; previously flagged because our hand-maintained
+    // VALID_ROLES didn't include them.
+    '<template><div role="doc-abstract">Abstract</div></template>',
+    '<template><section role="doc-chapter"></section></template>',
+    '<template><svg role="graphics-document"></svg></template>',
+    '<template><svg role="graphics-object"></svg></template>',
+
+    // Whitespace-separated role fallback list — ARIA 1.2 §5.4. Each token
+    // must individually be valid.
+    '<template><div role="tabpanel row"></div></template>',
+    '<template><svg role="graphics-document document"></svg></template>',
+    '<template><section role="doc-appendix doc-bibliography"></section></template>',
   ],
 
   invalid: [
@@ -164,18 +178,18 @@ ruleTester.run('template-no-invalid-role', rule, {
     {
       code: '<template><div role="command interface"></div></template>',
       output: null,
-      errors: [{ message: "Invalid ARIA role 'command interface'. Must be a valid ARIA role." }],
+      errors: [{ message: "Invalid ARIA role 'command'. Must be a valid ARIA role." }],
     },
     {
       code: '<template><div role="COMMAND INTERFACE"></div></template>',
       output: null,
-      errors: [{ message: "Invalid ARIA role 'COMMAND INTERFACE'. Must be a valid ARIA role." }],
+      errors: [{ message: "Invalid ARIA role 'command'. Must be a valid ARIA role." }],
     },
     {
       code: '<template><div role="command interface"></div></template>',
       output: null,
       options: [{ catchNonexistentRoles: true }],
-      errors: [{ message: "Invalid ARIA role 'command interface'. Must be a valid ARIA role." }],
+      errors: [{ message: "Invalid ARIA role 'command'. Must be a valid ARIA role." }],
     },
 
     // Newly added SEMANTIC_ELEMENTS: presentation/none on iframe, video, audio
@@ -247,6 +261,16 @@ hbsRuleTester.run('template-no-invalid-role', rule, {
       code: '<div role="command interface"></div>',
       options: [{ catchNonexistentRoles: false }],
     },
+
+    // DPUB-ARIA (doc-*) and Graphics-ARIA (graphics-*) roles.
+    '<div role="doc-abstract">Abstract</div>',
+    '<section role="doc-chapter"></section>',
+    '<svg role="graphics-document"></svg>',
+
+    // Whitespace-separated role fallback list.
+    '<div role="tabpanel row"></div>',
+    '<svg role="graphics-document document"></svg>',
+    '<section role="doc-appendix doc-bibliography"></section>',
   ],
   invalid: [
     {
@@ -302,18 +326,18 @@ hbsRuleTester.run('template-no-invalid-role', rule, {
     {
       code: '<div role="command interface"></div>',
       output: null,
-      errors: [{ message: "Invalid ARIA role 'command interface'. Must be a valid ARIA role." }],
+      errors: [{ message: "Invalid ARIA role 'command'. Must be a valid ARIA role." }],
     },
     {
       code: '<div role="command interface"></div>',
       output: null,
       options: [{ catchNonexistentRoles: true }],
-      errors: [{ message: "Invalid ARIA role 'command interface'. Must be a valid ARIA role." }],
+      errors: [{ message: "Invalid ARIA role 'command'. Must be a valid ARIA role." }],
     },
     {
       code: '<div role="COMMAND INTERFACE"></div>',
       output: null,
-      errors: [{ message: "Invalid ARIA role 'COMMAND INTERFACE'. Must be a valid ARIA role." }],
+      errors: [{ message: "Invalid ARIA role 'command'. Must be a valid ARIA role." }],
     },
     // Newly added SEMANTIC_ELEMENTS: presentation/none on iframe, video, audio, embed
     {