fix(template-require-mandatory-role-attributes): lowercase role; split whitespace-separated role lists

Two changes, shared root cause (both deal with role-token normalisation).

1. Case-insensitive role matching. Per HTML-AAM, ARIA role tokens
   compare as ASCII-case-insensitive. Before: <div role="COMBOBOX">
   was silently accepted because "COMBOBOX" didn't match "combobox" in
   aria-query. Now: lowercase before lookup.

2. Whitespace-separated role fallback lists. Per ARIA 1.2 §5.4, a role
   attribute may list multiple tokens to express a fallback; a UA picks
   the first one it recognises. Before: role="combobox listbox" was
   treated as one opaque string, aria-query returned undefined, and
   the rule skipped silently. Now: split on whitespace, check against
   the first recognised role's required attributes (matching jsx-a11y).

Helpers renamed to plural forms (getStaticRolesFromElement,
getStaticRolesFromMustache) and getMissingRequiredAttributes now
returns { role, missing } so the reporter can use the actually-checked
role in the error message.

Four new tests cover the two cases (valid + invalid of each).

Author: johanrd

lib/rules/template-require-mandatory-role-attributes.js

@@ -8,39 +8,59 @@ function createRequiredAttributeErrorMessage(attrs, role) {
   return `The attributes ${attrs.join(', ')} are required by the role ${role}`;
 }
 
-function getStaticRoleFromElement(node) {
+// ARIA role values are whitespace-separated tokens compared ASCII-case-insensitively.
+// Returns the list of normalised tokens, or undefined when the attribute is
+// missing or dynamic.
+function getStaticRolesFromElement(node) {
   const roleAttr = node.attributes?.find((attr) => attr.name === 'role');
 
   if (roleAttr?.value?.type === 'GlimmerTextNode') {
-    return roleAttr.value.chars || undefined;
+    return splitRoleTokens(roleAttr.value.chars);
   }
 
   return undefined;
 }
 
-function getStaticRoleFromMustache(node) {
+function getStaticRolesFromMustache(node) {
   const rolePair = node.hash?.pairs?.find((pair) => pair.key === 'role');
 
   if (rolePair?.value?.type === 'GlimmerStringLiteral') {
-    return rolePair.value.value;
+    return splitRoleTokens(rolePair.value.value);
   }
 
   return undefined;
 }
 
-function getMissingRequiredAttributes(role, foundAriaAttributes) {
-  const roleDefinition = roles.get(role);
-
-  if (!roleDefinition) {
-    return null;
+function splitRoleTokens(value) {
+  if (!value) {
+    return undefined;
   }
+  const tokens = value
+    .trim()
+    .toLowerCase()
+    .split(/\s+/u)
+    .filter(Boolean);
+  return tokens.length > 0 ? tokens : undefined;
+}
 
-  const requiredAttributes = Object.keys(roleDefinition.requiredProps);
-  const missingRequiredAttributes = requiredAttributes.filter(
-    (requiredAttribute) => !foundAriaAttributes.includes(requiredAttribute)
-  );
-
-  return missingRequiredAttributes.length > 0 ? missingRequiredAttributes : null;
+// For an ARIA role-fallback list like "combobox listbox", check required
+// attributes against the FIRST recognised role (the primary) — matches jsx-a11y.
+function getMissingRequiredAttributes(roleTokens, foundAriaAttributes) {
+  for (const role of roleTokens) {
+    const roleDefinition = roles.get(role);
+    if (!roleDefinition) {
+      continue;
+    }
+    const requiredAttributes = Object.keys(roleDefinition.requiredProps);
+    const missingRequiredAttributes = requiredAttributes.filter(
+      (requiredAttribute) => !foundAriaAttributes.includes(requiredAttribute)
+    );
+    return {
+      role,
+      missing: missingRequiredAttributes.length > 0 ? missingRequiredAttributes : null,
+    };
+  }
+  return null;
 }
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -83,38 +103,38 @@ module.exports = {
 
     return {
       GlimmerElementNode(node) {
-        const role = getStaticRoleFromElement(node);
+        const roleTokens = getStaticRolesFromElement(node);
 
-        if (!role) {
+        if (!roleTokens) {
           return;
         }
 
         const foundAriaAttributes = (node.attributes ?? [])
           .filter((attribute) => attribute.name?.startsWith('aria-'))
           .map((attribute) => attribute.name);
 
-        const missingRequiredAttributes = getMissingRequiredAttributes(role, foundAriaAttributes);
+        const result = getMissingRequiredAttributes(roleTokens, foundAriaAttributes);
 
-        if (missingRequiredAttributes) {
-          reportMissingAttributes(node, role, missingRequiredAttributes);
+        if (result?.missing) {
+          reportMissingAttributes(node, result.role, result.missing);
         }
       },
 
       GlimmerMustacheStatement(node) {
-        const role = getStaticRoleFromMustache(node);
+        const roleTokens = getStaticRolesFromMustache(node);
 
-        if (!role) {
+        if (!roleTokens) {
           return;
         }
 
         const foundAriaAttributes = (node.hash?.pairs ?? [])
           .filter((pair) => pair.key.startsWith('aria-'))
           .map((pair) => pair.key);
 
-        const missingRequiredAttributes = getMissingRequiredAttributes(role, foundAriaAttributes);
+        const result = getMissingRequiredAttributes(roleTokens, foundAriaAttributes);
 
-        if (missingRequiredAttributes) {
-          reportMissingAttributes(node, role, missingRequiredAttributes);
+        if (result?.missing) {
+          reportMissingAttributes(node, result.role, result.missing);
         }
       },
     };

tests/lib/rules/template-require-mandatory-role-attributes.js

@@ -25,6 +25,11 @@ ruleTester.run('template-require-mandatory-role-attributes', rule, {
     '<template>{{foo-component role="button"}}</template>',
     '<template>{{foo-component role="unknown"}}</template>',
     '<template>{{foo-component role=role}}</template>',
+
+    // Case-insensitive role matching — ARIA role tokens compare as ASCII-case-insensitive.
+    '<template><div role="COMBOBOX" aria-expanded="false" aria-controls="ctrl" /></template>',
+    // Role fallback list — primary role's required attributes are satisfied.
+    '<template><div role="combobox listbox" aria-expanded="false" aria-controls="ctrl" /></template>',
   ],
 
   invalid: [
@@ -75,6 +80,27 @@ ruleTester.run('template-require-mandatory-role-attributes', rule, {
       output: null,
       errors: [{ message: 'The attribute aria-checked is required by the role checkbox' }],
     },
+
+    // Case-insensitivity surfaces previously-unflagged mistakes.
+    {
+      code: '<template><div role="COMBOBOX"></div></template>',
+      output: null,
+      errors: [
+        {
+          message: 'The attributes aria-controls, aria-expanded are required by the role combobox',
+        },
+      ],
+    },
+    // Role-fallback list: when the primary role is missing required props, flag it.
+    {
+      code: '<template><div role="combobox listbox"></div></template>',
+      output: null,
+      errors: [
+        {
+          message: 'The attributes aria-controls, aria-expanded are required by the role combobox',
+        },
+      ],
+    },
   ],
 });