Extract rule: template-no-unsupported-role-attributes

Author: NullVoxPopuli

README.md

@@ -197,6 +197,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-nested-interactive](docs/rules/template-no-nested-interactive.md)                                   | disallow nested interactive elements                                             |    |    |    |
 | [template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)                                         | disallow nested landmark elements                                                |    |    |    |
 | [template-no-pointer-down-event-binding](docs/rules/template-no-pointer-down-event-binding.md)                   | disallow pointer down event bindings                                             |    |    |    |
+| [template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)                 | disallow ARIA attributes that are not supported by the element role              |    |    |    |
 | [template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)                           | disallow excess whitespace within words (e.g. "W e l c o m e")                   |    |    |    |
 | [template-require-aria-activedescendant-tabindex](docs/rules/template-require-aria-activedescendant-tabindex.md) | require non-interactive elements with aria-activedescendant to have tabindex     |    | 🔧 |    |
 | [template-require-iframe-title](docs/rules/template-require-iframe-title.md)                                     | require iframe elements to have a title attribute                                |    |    |    |

docs/rules/template-no-unsupported-role-attributes.md

@@ -0,0 +1,59 @@
+# ember/template-no-unsupported-role-attributes
+
+<!-- end auto-generated rule header -->
+
+Disallows ARIA attributes that are not supported by the element's role.
+
+Different ARIA roles support different sets of ARIA attributes. Using unsupported attributes can cause confusion and doesn't provide the intended accessibility benefits.
+
+## Rule Details
+
+This rule checks elements with specific ARIA roles and ensures they only use supported ARIA attributes for that role.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <div role="button" aria-checked="true">Button</div>
+</template>
+```
+
+```gjs
+<template>
+  <div role="checkbox" aria-pressed="false">Checkbox</div>
+</template>
+```
+
+```gjs
+<template>
+  <div role="tab" aria-valuenow="1">Tab</div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <div role="button" aria-pressed="true">Toggle Button</div>
+</template>
+```
+
+```gjs
+<template>
+  <div role="checkbox" aria-checked="false">Accept Terms</div>
+</template>
+```
+
+```gjs
+<template>
+  <div role="tab" aria-selected="true">Home Tab</div>
+</template>
+```
+
+## References
+
+- [ARIA Roles](https://www.w3.org/TR/wai-aria-1.2/#role_definitions)
+- [ARIA States and Properties](https://www.w3.org/TR/wai-aria-1.2/#state_prop_def)
+- [eslint-plugin-ember template-no-unsupported-role-attributes](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-unsupported-role-attributes.md)

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

@@ -0,0 +1,146 @@
+const { roles, elementRoles } = require('aria-query');
+
+/**
+ * Get the implicit ARIA role for an HTML element based on its tag name and type attribute.
+ * Uses the aria-query elementRoles mapping.
+ */
+function getImplicitRole(tagName, typeAttribute) {
+  // For input elements, match against entries with the specific type attribute
+  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];
+          }
+        }
+      }
+    }
+  }
+  // For all elements, fall back to the first matching entry by tag name
+  for (const key of elementRoles.keys()) {
+    if (key.name === tagName) {
+      return elementRoles.get(key)[0];
+    }
+  }
+  return null;
+}
+
+function getExplicitRole(node) {
+  const roleAttr = node.attributes?.find((attr) => attr.name === 'role');
+  if (roleAttr && roleAttr.value?.type === 'GlimmerTextNode') {
+    return roleAttr.value.chars.trim();
+  }
+  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;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow ARIA attributes that are not supported by the element role',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-unsupported-role-attributes.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unsupported:
+        'ARIA attribute "{{attribute}}" is not supported for role "{{role}}". Remove the attribute or change the role.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-unsupported-role-attributes.js',
+      docs: 'docs/rule/no-unsupported-role-attributes.md',
+      tests: 'test/unit/rules/no-unsupported-role-attributes-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        // Determine the role: explicit first, then implicit
+        let role = getExplicitRole(node);
+        if (!role) {
+          const tagName = node.tag;
+          const typeAttribute = getTypeAttribute(node);
+          role = getImplicitRole(tagName, typeAttribute);
+        }
+
+        if (!role) {
+          return;
+        }
+
+        const roleDefinition = roles.get(role);
+        if (!roleDefinition) {
+          return;
+        }
+
+        const supportedProps = Object.keys(roleDefinition.props);
+        const ariaAttributes = node.attributes?.filter(
+          (attr) => attr.type === 'GlimmerAttrNode' && attr.name && attr.name.startsWith('aria-')
+        );
+
+        for (const attr of ariaAttributes || []) {
+          if (!supportedProps.includes(attr.name)) {
+            context.report({
+              node: attr,
+              messageId: 'unsupported',
+              data: {
+                attribute: attr.name,
+                role,
+              },
+            });
+          }
+        }
+      },
+
+      GlimmerMustacheStatement(node) {
+        if (!node.hash || !node.hash.pairs) {
+          return;
+        }
+
+        const rolePair = node.hash.pairs.find((pair) => pair.key === 'role');
+        if (!rolePair || rolePair.value?.type !== 'GlimmerStringLiteral') {
+          return;
+        }
+
+        const role = rolePair.value.original;
+        if (!role) {
+          return;
+        }
+
+        const roleDefinition = roles.get(role);
+        if (!roleDefinition) {
+          return;
+        }
+
+        const supportedProps = Object.keys(roleDefinition.props);
+        const ariaPairs = node.hash.pairs.filter((pair) => pair.key.startsWith('aria-'));
+
+        for (const pair of ariaPairs) {
+          if (!supportedProps.includes(pair.key)) {
+            context.report({
+              node: pair,
+              messageId: 'unsupported',
+              data: {
+                attribute: pair.key,
+                role,
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};