fix(template-no-unsupported-role-attributes): honor aria-query attribute constraints in implicit-role lookup

The old getImplicitRole picked the first elementRoles entry whose name
matched the tag. For <input> it tried a type-attribute match but
ignored the rest of aria-query's constraint annotations.

Concrete consequences of the old logic:

- <input type="text"> without a `list` attribute returned "combobox"
  (because aria-query's {type=text, list=set}→combobox entry appears
  before {type=text, list=undefined}→textbox). Correct implicit role is
  textbox.
- <input type="email|tel|url"> behaved the same way.
- <input type="password"> isn't mapped by aria-query; the fallback
  branch returned the first input entry — "button".

The new implementation walks every elementRoles key whose tag matches,
checks each attribute spec (honoring `constraints: ["set"]` and
`constraints: ["undefined"]` as well as required values), and picks the
entry with the most attribute constraints satisfied.

Behavioral impact:

- Text-like inputs without a list attribute now correctly resolve to
  textbox and accept aria-required / aria-readonly / aria-placeholder.
- <input type="password"> now resolves to no implicit role, so global
  ARIA attrs don't trip the rule (matching jsx-a11y's treatment).
- One existing test updated: <input type="email"> now maps to textbox
  in the error message; added a sibling case with `list="x"` to cover
  the combobox path.
- Eight new valid tests cover the textbox/password paths.

Author: johanrd

lib/rules/template-no-unsupported-role-attributes.js

@@ -8,23 +8,68 @@ function createUnsupportedAttributeErrorMessage(attribute, role, element) {
   return `The attribute ${attribute} is not supported by the role ${role}`;
 }
 
-function getImplicitRole(tagName, typeAttribute) {
-  if (tagName === 'input') {
-    for (const key of elementRoles.keys()) {
-      if (key.name === tagName && key.attributes) {
-        for (const attribute of key.attributes) {
-          if (attribute.name === 'type' && attribute.value === typeAttribute) {
-            return elementRoles.get(key)[0];
-          }
-        }
-      }
-    }
+function getStaticAttrValue(node, name) {
+  const attr = node.attributes?.find((a) => a.name === name);
+  if (!attr) {
+    return undefined;
   }
+  if (!attr.value || attr.value.type !== 'GlimmerTextNode') {
+    // Presence with dynamic value — treat as "set" but unknown string.
+    return '';
+  }
+  return attr.value.chars;
+}
+
+function nodeSatisfiesAttributeConstraint(node, attrSpec) {
+  const value = getStaticAttrValue(node, attrSpec.name);
+  const isSet = value !== undefined;
+
+  if (attrSpec.constraints?.includes('set')) {
+    return isSet;
+  }
+  if (attrSpec.constraints?.includes('undefined')) {
+    return !isSet;
+  }
+  if (attrSpec.value !== undefined) {
+    return isSet && value === attrSpec.value;
+  }
+  // No constraint listed — just require presence.
+  return isSet;
+}
 
-  const key = [...elementRoles.keys()].find((entry) => entry.name === tagName);
-  const implicitRoles = key && elementRoles.get(key);
+function keyMatchesNode(node, key) {
+  if (key.name !== node.tag) {
+    return false;
+  }
+  if (!key.attributes || key.attributes.length === 0) {
+    return true;
+  }
+  return key.attributes.every((attrSpec) =>
+    nodeSatisfiesAttributeConstraint(node, attrSpec)
+  );
+}
 
-  return implicitRoles && implicitRoles[0];
+function getImplicitRole(node) {
+  // Honor aria-query's attribute constraints when mapping element -> implicit role.
+  // Each elementRoles entry lists attributes that must match (with optional
+  // constraints "set" / "undefined"); pick the most specific entry whose
+  // attribute spec is fully satisfied by the node.
+  let bestKey;
+  let bestSpecificity = -1;
+  for (const key of elementRoles.keys()) {
+    if (!keyMatchesNode(node, key)) {
+      continue;
+    }
+    const specificity = key.attributes?.length ?? 0;
+    if (specificity > bestSpecificity) {
+      bestKey = key;
+      bestSpecificity = specificity;
+    }
+  }
+  if (!bestKey) {
+    return undefined;
+  }
+  return elementRoles.get(bestKey)[0];
 }
 
 function getExplicitRole(node) {
@@ -35,14 +80,6 @@ function getExplicitRole(node) {
   return null;
 }
 
-function getTypeAttribute(node) {
-  const typeAttr = node.attributes?.find((attr) => attr.name === 'type');
-  if (typeAttr && typeAttr.value?.type === 'GlimmerTextNode') {
-    return typeAttr.value.chars.trim();
-  }
-  return null;
-}
-
 function removeRangeWithAdjacentWhitespace(sourceText, range) {
   let [start, end] = range;
 
@@ -111,8 +148,7 @@ module.exports = {
 
         if (!role) {
           element = node.tag;
-          const typeAttribute = getTypeAttribute(node);
-          role = getImplicitRole(element, typeAttribute);
+          role = getImplicitRole(node);
         }
 
         if (!role) {

tests/lib/rules/template-no-unsupported-role-attributes.js

@@ -21,6 +21,19 @@ const validHbs = [
   '<ItemCheckbox @model={{@model}} @checkable={{@checkable}} />',
   '<some-custom-element />',
   '<input type="password">',
+
+  // <input type="password"> has no implicit role per aria-query (it's intentionally
+  // not mapped so that screen readers don't announce typed content). No role →
+  // no aria-supported-props check.
+  '<input type="password" aria-describedby="hint" />',
+  '<input type="password" aria-required="true" />',
+
+  // <input type="text"> without a list attribute is a textbox — aria-required,
+  // aria-readonly, aria-placeholder are all supported.
+  '<input type="text" aria-required="true" />',
+  '<input type="email" aria-readonly="true" />',
+  '<input type="tel" aria-required="true" />',
+  '<input type="url" aria-placeholder="https://…" />',
 ];
 
 const invalidHbs = [
@@ -80,8 +93,21 @@ const invalidHbs = [
     ],
   },
   {
+    // <input type="email"> without a `list` attribute → implicit role "textbox"
+    // (per aria-query / HTML-AAM). With a `list` attribute it would be "combobox".
     code: '<input type="email" aria-level={{this.level}} />',
     output: '<input type="email" />',
+    errors: [
+      {
+        message:
+          'The attribute aria-level is not supported by the element input with the implicit role of textbox',
+      },
+    ],
+  },
+  {
+    // With a `list` attribute, <input type="email"> becomes a combobox.
+    code: '<input type="email" list="x" aria-level={{this.level}} />',
+    output: '<input type="email" list="x" />',
     errors: [
       {
         message: