fix(template-require-mandatory-role-attributes): extend native-checked exemption to {{input}} helper

Two changes:

1. `getInputType` now recognises the classic Ember `{{input type=...}}`
   helper as an input host, in addition to the native `<input>` element.
   The `GlimmerMustacheStatement` handler is updated to pass `node` into
   `getMissingRequiredAttributes`, matching the element-node handler.

2. Reverts the defensive `role.toLowerCase()` in the whitelist-key build
   from the previous commit — it was dead code. The caller
   (`getMissingRequiredAttributes`) short-circuits via aria-query's
   case-sensitive `roles.get(role)`, so `role` is guaranteed lowercase
   by the time `isNativelyChecked` runs. Rule-wide role case-
   insensitivity is not in scope for this PR; that is ember-cli#2728.

Tests adjusted accordingly: drop mixed-case-role valid tests (they
passed for the wrong reason — via the case-sensitivity short-circuit in
aria-query, not via the whitelist). Add coverage for `{{input}}`
helper on both gts and hbs parsers, including off-whitelist pairings
that must still flag.

Author: johanrd

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

@@ -42,25 +42,43 @@ const NATIVELY_CHECKED_INPUT_ROLE_PAIRS = new Set([
   'radio:menuitemradio',
 ]);
 
+// Reads the `type` keyword from a native <input> element OR a classic
+// `{{input type=...}}` helper invocation (the built-in Ember helper renders
+// a native <input>). Returns the lowercased value, or undefined if the node
+// is not an input-like host or the value is dynamic.
 function getInputType(node) {
-  if (node?.tag !== 'input') {
+  if (node?.type === 'GlimmerElementNode') {
+    if (node.tag !== 'input') {
+      return undefined;
+    }
+    const typeAttr = node.attributes?.find((a) => a.name === 'type');
+    if (typeAttr?.value?.type === 'GlimmerTextNode') {
+      return typeAttr.value.chars?.toLowerCase();
+    }
     return undefined;
   }
-  const typeAttr = node.attributes?.find((a) => a.name === 'type');
-  if (typeAttr?.value?.type === 'GlimmerTextNode') {
-    // HTML input `type` keywords are ASCII case-insensitive.
-    return typeAttr.value.chars?.toLowerCase();
+  if (node?.type === 'GlimmerMustacheStatement') {
+    if (node.path?.original !== 'input') {
+      return undefined;
+    }
+    const typePair = node.hash?.pairs?.find((pair) => pair.key === 'type');
+    if (typePair?.value?.type === 'GlimmerStringLiteral') {
+      return typePair.value.value?.toLowerCase();
+    }
+    return undefined;
   }
   return undefined;
 }
 
 function isNativelyChecked(node, role) {
   const type = getInputType(node);
-  if (!type || typeof role !== 'string') {
+  if (!type) {
     return false;
   }
-  // ARIA role tokens compare ASCII-case-insensitively.
-  return NATIVELY_CHECKED_INPUT_ROLE_PAIRS.has(`${type}:${role.toLowerCase()}`);
+  // `role` is guaranteed to be a lowercase aria-query role key by the time we
+  // get here (getMissingRequiredAttributes short-circuits via `roles.get(role)`
+  // which is case-sensitive), so no lowercasing needed on the whitelist key.
+  return NATIVELY_CHECKED_INPUT_ROLE_PAIRS.has(`${type}:${role}`);
 }
 
 function getMissingRequiredAttributes(role, foundAriaAttributes, node) {
@@ -156,7 +174,11 @@ module.exports = {
           .filter((pair) => pair.key.startsWith('aria-'))
           .map((pair) => pair.key);
 
-        const missingRequiredAttributes = getMissingRequiredAttributes(role, foundAriaAttributes);
+        const missingRequiredAttributes = getMissingRequiredAttributes(
+          role,
+          foundAriaAttributes,
+          node
+        );
 
         if (missingRequiredAttributes) {
           reportMissingAttributes(node, role, missingRequiredAttributes);

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

@@ -36,15 +36,18 @@ ruleTester.run('template-require-mandatory-role-attributes', rule, {
     '<template><input type="checkbox" role="checkbox" /></template>',
 
     // HTML `type` is ASCII case-insensitive; `Checkbox` must match `checkbox`.
+    // (The `type` attribute IS lowercased at the whitelist-key boundary; role
+    // tokens are NOT — rule-wide role case-insensitivity lands in #2728.)
     '<template><input type="Checkbox" role="switch" /></template>',
+    '<template><input type="CHECKBOX" role="switch" /></template>',
 
-    // ARIA role tokens are ASCII case-insensitive — mixed-case roles are
-    // exempted on the same pairings.
-    '<template><input type="checkbox" role="SWITCH" /></template>',
-    '<template><input type="checkbox" role="Switch" /></template>',
-    '<template><input type="CHECKBOX" role="MENUITEMCHECKBOX" /></template>',
-    '<template><input type="radio" role="Radio" /></template>',
-    '<template><input type="RADIO" role="menuitemRadio" /></template>',
+    // Classic Ember {{input type=... role=...}} helper renders a native
+    // <input> and is exempted on the same whitelist as the angle-bracket form.
+    '<template>{{input type="checkbox" role="switch"}}</template>',
+    '<template>{{input type="checkbox" role="menuitemcheckbox"}}</template>',
+    '<template>{{input type="radio" role="menuitemradio"}}</template>',
+    // `type` case-insensitivity works on the mustache form too.
+    '<template>{{input type="Checkbox" role="switch"}}</template>',
   ],
 
   invalid: [
@@ -102,6 +105,17 @@ ruleTester.run('template-require-mandatory-role-attributes', rule, {
       output: null,
       errors: [{ message: 'The attribute aria-checked is required by the role radio' }],
     },
+    // {{input}} helper with off-whitelist role is flagged too.
+    {
+      code: '<template>{{input type="text" role="switch"}}</template>',
+      output: null,
+      errors: [{ message: 'The attribute aria-checked is required by the role switch' }],
+    },
+    {
+      code: '<template>{{input type="checkbox" role="radio"}}</template>',
+      output: null,
+      errors: [{ message: 'The attribute aria-checked is required by the role radio' }],
+    },
     {
       code: '<template><input type="radio" role="switch" /></template>',
       output: null,
@@ -163,14 +177,13 @@ hbsRuleTester.run('template-require-mandatory-role-attributes', rule, {
 
     // HTML `type` is ASCII case-insensitive; `Checkbox` must match `checkbox`.
     '<input type="Checkbox" role="switch" />',
+    '<input type="CHECKBOX" role="switch" />',
 
-    // ARIA role tokens are ASCII case-insensitive — mixed-case roles are
-    // exempted on the same pairings.
-    '<input type="checkbox" role="SWITCH" />',
-    '<input type="checkbox" role="Switch" />',
-    '<input type="CHECKBOX" role="MENUITEMCHECKBOX" />',
-    '<input type="radio" role="Radio" />',
-    '<input type="RADIO" role="menuitemRadio" />',
+    // Classic Ember {{input}} helper renders a native <input>; same whitelist.
+    '{{input type="checkbox" role="switch"}}',
+    '{{input type="checkbox" role="menuitemcheckbox"}}',
+    '{{input type="radio" role="menuitemradio"}}',
+    '{{input type="Checkbox" role="switch"}}',
   ],
   invalid: [
     {
@@ -240,5 +253,17 @@ hbsRuleTester.run('template-require-mandatory-role-attributes', rule, {
       output: null,
       errors: [{ message: 'The attribute aria-checked is required by the role switch' }],
     },
+
+    // {{input}} helper with off-whitelist role is flagged too.
+    {
+      code: '{{input type="text" role="switch"}}',
+      output: null,
+      errors: [{ message: 'The attribute aria-checked is required by the role switch' }],
+    },
+    {
+      code: '{{input type="checkbox" role="radio"}}',
+      output: null,
+      errors: [{ message: 'The attribute aria-checked is required by the role radio' }],
+    },
   ],
 });