Merge pull request #2471 from ember-cli/nvp/template-lint-extract-rule-template-no-invalid-aria-attributes

Extract rule: no-invalid-aria-attributes

Author: NullVoxPopuli

README.md

@@ -188,6 +188,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-autofocus-attribute](docs/rules/template-no-autofocus-attribute.md)             | disallow autofocus attribute                                                     |    | 🔧 |    |
 | [template-no-empty-headings](docs/rules/template-no-empty-headings.md)                       | disallow empty heading elements                                                  |    |    |    |
 | [template-no-heading-inside-button](docs/rules/template-no-heading-inside-button.md)         | disallow heading elements inside button elements                                 |    |    |    |
+| [template-no-invalid-aria-attributes](docs/rules/template-no-invalid-aria-attributes.md)     | disallow invalid aria-* attributes                                               |    |    |    |
 | [template-no-invalid-interactive](docs/rules/template-no-invalid-interactive.md)             | disallow non-interactive elements with interactive handlers                      |    |    |    |
 | [template-no-invalid-link-title](docs/rules/template-no-invalid-link-title.md)               | disallow invalid title attributes on link elements                               |    |    |    |
 | [template-no-invalid-role](docs/rules/template-no-invalid-role.md)                           | disallow invalid ARIA roles                                                      |    |    |    |

docs/rules/template-no-invalid-aria-attributes.md

@@ -0,0 +1,43 @@
+# ember/template-no-invalid-aria-attributes
+
+<!-- end auto-generated rule header -->
+
+Disallow invalid ARIA attributes. Only use valid ARIA attributes as defined in the ARIA specification.
+
+## Rule Details
+
+This rule validates that only standard ARIA attributes are used on elements.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <div aria-fake="value">Content</div>
+</template>
+
+<template>
+  <div aria-invalid-attr="value">Content</div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <div aria-label="Label">Content</div>
+</template>
+
+<template>
+  <div aria-hidden="true">Content</div>
+</template>
+
+<template>
+  <div aria-describedby="description-id">Content</div>
+</template>
+```
+
+## References
+
+- [Using ARIA, Roles, States, and Properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)

lib/rules/template-no-invalid-aria-attributes.js

@@ -0,0 +1,128 @@
+const { aria } = require('aria-query');
+
+function isBoolean(value) {
+  return value === 'true' || value === 'false';
+}
+
+function isNumeric(value) {
+  if (typeof value !== 'string' || value === '') {
+    return false;
+  }
+  return !Number.isNaN(Number(value));
+}
+
+function isValidAriaValue(attrName, value) {
+  const attrDef = aria.get(attrName);
+  if (!attrDef) {
+    return true;
+  }
+
+  if (value === 'undefined') {
+    return Boolean(attrDef.allowundefined);
+  }
+
+  switch (attrDef.type) {
+    case 'boolean': {
+      return isBoolean(value);
+    }
+    case 'tristate': {
+      return isBoolean(value) || value === 'mixed';
+    }
+    case 'string': {
+      return typeof value === 'string';
+    }
+    case 'id': {
+      return typeof value === 'string' && !isBoolean(value);
+    }
+    case 'idlist': {
+      return (
+        typeof value === 'string' &&
+        value.split(' ').every((token) => token.length > 0 && !isBoolean(token))
+      );
+    }
+    case 'integer': {
+      return /^-?\d+$/.test(value);
+    }
+    case 'number': {
+      return isNumeric(value) && !isBoolean(value);
+    }
+    case 'token': {
+      // aria-query stores boolean values as actual booleans, convert for comparison
+      const permittedValues = attrDef.values.map((v) =>
+        typeof v === 'boolean' ? v.toString() : v
+      );
+      return permittedValues.includes(value);
+    }
+    case 'tokenlist': {
+      return value.split(' ').every((token) => attrDef.values.includes(token.toLowerCase()));
+    }
+    default: {
+      return true;
+    }
+  }
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow invalid aria-* attributes',
+      category: 'Accessibility',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-invalid-aria-attributes.md',
+      templateMode: 'both',
+    },
+    schema: [],
+    messages: {
+      noInvalidAriaAttribute: 'Invalid ARIA attribute: {{attribute}}',
+      invalidAriaAttributeValue: 'Invalid value for ARIA attribute {{attribute}}.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-invalid-aria-attributes.js',
+      docs: 'docs/rule/no-invalid-aria-attributes.md',
+      tests: 'test/unit/rules/no-invalid-aria-attributes-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerAttrNode(node) {
+        if (!node.name.startsWith('aria-')) {
+          return;
+        }
+
+        // Check for unknown ARIA attribute
+        if (!aria.has(node.name)) {
+          context.report({
+            node,
+            messageId: 'noInvalidAriaAttribute',
+            data: { attribute: node.name },
+          });
+          return;
+        }
+
+        // Skip value validation for dynamic values (MustacheStatement, ConcatStatement)
+        if (
+          !node.value ||
+          node.value.type === 'GlimmerMustacheStatement' ||
+          node.value.type === 'GlimmerConcatStatement'
+        ) {
+          return;
+        }
+
+        // Validate value for text node values
+        if (node.value.type === 'GlimmerTextNode') {
+          const value = node.value.chars;
+          if (!isValidAriaValue(node.name, value)) {
+            context.report({
+              node,
+              messageId: 'invalidAriaAttributeValue',
+              data: { attribute: node.name },
+            });
+          }
+        }
+      },
+    };
+  },
+};

package.json

@@ -60,6 +60,7 @@
   },
   "dependencies": {
     "@ember-data/rfc395-data": "^0.0.4",
+    "aria-query": "^5.3.2",
     "css-tree": "^3.0.1",
     "editorconfig": "^3.0.2",
     "ember-eslint-parser": "^0.6.0",