BUGFIX: template-require-mandatory-role-attributes — lowercase role + split whitespace role lists

[johanrd]

Note

This is part of a series where Claude has audited eslint-plugin-ember against jsx-a11y, vuejs-accessibility, angular-eslint, lit-a11y and html-validate, ember-template-lint, and the HTML and WCAG specs.

Two related fixes (shared root cause — both deal with role-token normalisation).

1. Case-insensitive role comparison

• Premise: ARIA role token comparison inherits case-insensitivity from HTML's enumerated-attribute rules — role="COMBOBOX" is the same token as role="combobox". (WAI-ARIA 1.2 §4.1 explicitly defers case-sensitivity to the host language: "Case-sensitivity of the comparison inherits from the case-sensitivity of the host language.")
• Problem: <div role="COMBOBOX"> was silently accepted — roles.get("COMBOBOX") returns undefined in aria-query, so the rule skipped the check entirely.

Fix: lowercase the role value before the lookup.

2. Whitespace-separated role fallback lists

• Premise: Per WAI-ARIA 1.2 §4.1, a role attribute may list multiple tokens and "User agents MUST use the first token in the sequence of tokens in the role attribute value that matches the name of any non-abstract WAI-ARIA role."
• Problem: role="combobox listbox" was treated as one opaque string. aria-query returned undefined, the rule skipped silently, and <div role="combobox listbox"> without aria-expanded + aria-controls wasn't flagged.

Fix: split on whitespace, validate the first recognised role per ARIA §4.1's first-token semantics. This diverges from jsx-a11y and vue-a11y, which validate every recognised token — our approach is closer to the UA behavior the spec prescribes. Noted as a deliberate divergence.

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

Four new tests cover both fixes (valid + invalid of each).

Prior art

Verified each peer in source:

Plugin	Rule	Verified behavior
jsx-a11y	role-has-required-aria-props	String(roleAttrValue).toLowerCase().split(' ') → .filter(recognised) → .forEach(validate). Validates EVERY recognised token.
vuejs-accessibility	role-has-required-aria-props	roleValue.toLowerCase().split(" ").forEach(role => { if (isAriaRoleDefinitionKey(role)) validate(role) }). Same pattern.
@angular-eslint/template	role-has-required-aria	Raw role string passed directly to roles.get(role). No .toLowerCase(), no .split().
lit-a11y	role-has-required-aria-attrs	Raw role string passed to isAriaRole / roles.get. No splitting, no lowercasing.