eslint-plugin-aria-state-validator 1.0.0

package/lib/rules/state-dependent-aria-validator.js

@@ -0,0 +1,385 @@
+/**
+ * @fileoverview ESLint rule to validate that ARIA state attributes are properly bound to component state
+ * @author eslint-plugin-aria-state-validator
+ */
+
+"use strict";
+
+const DYNAMIC_ARIA_ATTRIBUTES = {
+  "aria-expanded": {
+    requiresState: true,
+    validValues: ["true", "false"],
+    description: "Toggle button or expandable element",
+  },
+  "aria-selected": {
+    requiresState: true,
+    validValues: ["true", "false"],
+    description: "Tab or Option selectable element",
+  },
+  "aria-checked": {
+    requiresState: true,
+    validValues: ["true", "false", "mixed"],
+    description: "Checkbox or Radio button",
+  },
+  "aria-pressed": {
+    requiresState: true,
+    validValues: ["true", "false", "mixed"],
+    description: "Toggle button",
+  },
+  "aria-hidden": {
+    requiresState: true,
+    validValues: ["true", "false"],
+    description: "Dynamically shown or hidden element",
+  },
+  "aria-disabled": {
+    requiresState: true,
+    validValues: ["true", "false"],
+    description: "Dynamically enabled/disabled element",
+  },
+  "aria-modal": {
+    requiresState: true,
+    validValues: ["true", "false"],
+    description: "Dialog or Modal",
+  },
+  "aria-current": {
+    requiresState: true,
+    validValues: ["page", "step", "location", "date", "time", "true", "false"],
+    description: "Current active item indicator",
+  },
+};
+
+const INTERACTIVE_ROLES = [
+  "button",
+  "tab",
+  "checkbox",
+  "radio",
+  "switch",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "option",
+  "treeitem",
+  "dialog",
+  "alertdialog",
+];
+
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Validate that ARIA state attributes are properly bound to component state",
+      category: "Accessibility",
+      recommended: true,
+      url: "https://github.com/your-repo/eslint-plugin-aria-state-validator",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      booleanBinding:
+        'ARIA attribute "{{ariaAttr}}" should not directly bind Boolean values. Convert to string.',
+      staticValueWithHandler:
+        'Element with interactive handler ({{handler}}) has static "{{ariaAttr}}" attribute. Should be bound to dynamic state.',
+      missingStateBinding:
+        'Element with role="{{role}}" should have "{{ariaAttr}}" attribute bound to dynamic state.',
+      invalidStaticValue:
+        'Static value "{{value}}" for "{{ariaAttr}}" should be managed with dynamic state.',
+    },
+  },
+
+  create(context) {
+    function isStaticValue(node) {
+      if (!node) return false;
+
+      if (node.type === "JSXExpressionContainer") {
+        const expression = node.expression;
+
+        if (expression.type === "Literal") {
+          return true;
+        }
+
+        if (
+          expression.type === "TemplateLiteral" &&
+          expression.expressions.length === 0
+        ) {
+          return true;
+        }
+
+        return false;
+      }
+
+      if (node.type === "Literal") {
+        return true;
+      }
+
+      return false;
+    }
+
+    function isBooleanIdentifier(node) {
+      if (!node || node.type !== "JSXExpressionContainer") {
+        return false;
+      }
+
+      const expression = node.expression;
+
+      if (expression.type === "Identifier") {
+        return true;
+      }
+
+      if (expression.type === "LogicalExpression") {
+        return true;
+      }
+
+      if (
+        expression.type === "UnaryExpression" &&
+        expression.operator === "!"
+      ) {
+        return true;
+      }
+
+      return false;
+    }
+
+    function hasProperStringConversion(node) {
+      if (!node || node.type !== "JSXExpressionContainer") {
+        return false;
+      }
+
+      const expression = node.expression;
+
+      if (expression.type === "ConditionalExpression") {
+        const consequent = expression.consequent;
+        const alternate = expression.alternate;
+
+        if (
+          consequent.type === "Literal" &&
+          typeof consequent.value === "string" &&
+          alternate.type === "Literal" &&
+          typeof alternate.value === "string"
+        ) {
+          return true;
+        }
+      }
+
+      if (
+        expression.type === "CallExpression" &&
+        expression.callee.type === "Identifier" &&
+        expression.callee.name === "String"
+      ) {
+        return true;
+      }
+
+      if (
+        expression.type === "CallExpression" &&
+        expression.callee.type === "MemberExpression" &&
+        expression.callee.property.name === "toString"
+      ) {
+        return true;
+      }
+
+      return false;
+    }
+
+    function hasInteractiveHandler(attributes) {
+      const interactiveHandlers = [
+        "onClick",
+        "onKeyDown",
+        "onKeyPress",
+        "onChange",
+        "onToggle",
+      ];
+
+      return attributes.some((attr) => {
+        if (attr.type !== "JSXAttribute") return false;
+        const name = attr.name.name;
+        return interactiveHandlers.includes(name);
+      });
+    }
+
+    function getRoleValue(attributes) {
+      const roleAttr = attributes.find(
+        (attr) => attr.type === "JSXAttribute" && attr.name.name === "role"
+      );
+
+      if (!roleAttr || !roleAttr.value) return null;
+
+      if (roleAttr.value.type === "Literal") {
+        return roleAttr.value.value;
+      }
+
+      if (
+        roleAttr.value.type === "JSXExpressionContainer" &&
+        roleAttr.value.expression.type === "Literal"
+      ) {
+        return roleAttr.value.expression.value;
+      }
+
+      return null;
+    }
+
+    function extractStateVariableFromHandler(handlerAttr) {
+      if (!handlerAttr || !handlerAttr.value) return null;
+
+      if (handlerAttr.value.type !== "JSXExpressionContainer") return null;
+
+      const expression = handlerAttr.value.expression;
+
+      // Arrow function or function expression
+      if (
+        expression.type === "ArrowFunctionExpression" ||
+        expression.type === "FunctionExpression"
+      ) {
+        const body = expression.body;
+
+        // Find setState calls in the body
+        let stateVariable = null;
+
+        // Simple case: () => setX(!x) or () => setX(prev => !prev)
+        if (body.type === "CallExpression") {
+          // Look for argument that might be state variable
+          if (body.arguments.length > 0) {
+            const arg = body.arguments[0];
+            if (arg.type === "UnaryExpression" && arg.operator === "!") {
+              if (arg.argument.type === "Identifier") {
+                stateVariable = arg.argument.name;
+              }
+            }
+          }
+        }
+
+        // Block statement case: () => { setX(!x); }
+        if (body.type === "BlockStatement" && body.body.length > 0) {
+          for (const stmt of body.body) {
+            if (stmt.type === "ExpressionStatement") {
+              const expr = stmt.expression;
+              if (expr.type === "CallExpression" && expr.arguments.length > 0) {
+                const arg = expr.arguments[0];
+                if (arg.type === "UnaryExpression" && arg.operator === "!") {
+                  if (arg.argument.type === "Identifier") {
+                    stateVariable = arg.argument.name;
+                    break;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        return stateVariable;
+      }
+
+      return null;
+    }
+
+    function createStringConversionFix(fixer, node) {
+      const sourceCode = context.getSourceCode();
+      const expression = node.expression;
+
+      let identifierName;
+
+      if (expression.type === "Identifier") {
+        identifierName = expression.name;
+      } else if (
+        expression.type === "UnaryExpression" &&
+        expression.operator === "!"
+      ) {
+        identifierName = sourceCode.getText(expression.argument);
+        return fixer.replaceText(
+          node,
+          `{${identifierName} ? 'false' : 'true'}`
+        );
+      } else {
+        const exprText = sourceCode.getText(expression);
+        return fixer.replaceText(node, `{${exprText} ? 'true' : 'false'}`);
+      }
+
+      return fixer.replaceText(node, `{${identifierName} ? 'true' : 'false'}`);
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        const attributes = node.attributes || [];
+        const hasHandler = hasInteractiveHandler(attributes);
+        const role = getRoleValue(attributes);
+
+        attributes.forEach((attr) => {
+          if (attr.type !== "JSXAttribute") return;
+
+          const attrName = attr.name.name;
+
+          if (!DYNAMIC_ARIA_ATTRIBUTES[attrName]) return;
+
+          const attrValue = attr.value;
+
+          if (
+            isBooleanIdentifier(attrValue) &&
+            !hasProperStringConversion(attrValue)
+          ) {
+            context.report({
+              node: attr,
+              messageId: "booleanBinding",
+              data: {
+                ariaAttr: attrName,
+              },
+              fix(fixer) {
+                return createStringConversionFix(fixer, attrValue);
+              },
+            });
+            return;
+          }
+
+          if (isStaticValue(attrValue) && hasHandler) {
+            const handlers = attributes.filter(
+              (a) =>
+                a.type === "JSXAttribute" &&
+                ["onClick", "onKeyDown", "onChange"].includes(a.name.name)
+            );
+
+            const handlerNames = handlers.map((a) => a.name.name);
+
+            // Try to extract state variable from handler for auto-fix
+            let stateVariable = null;
+            for (const handler of handlers) {
+              stateVariable = extractStateVariableFromHandler(handler);
+              if (stateVariable) break;
+            }
+
+            context.report({
+              node: attr,
+              messageId: "staticValueWithHandler",
+              data: {
+                ariaAttr: attrName,
+                handler: handlerNames.join(", "),
+              },
+              fix: stateVariable
+                ? (fixer) => {
+                    return fixer.replaceText(
+                      attrValue,
+                      `{${stateVariable} ? 'true' : 'false'}`
+                    );
+                  }
+                : undefined,
+            });
+            return;
+          }
+
+          if (
+            role &&
+            INTERACTIVE_ROLES.includes(role) &&
+            isStaticValue(attrValue)
+          ) {
+            context.report({
+              node: attr,
+              messageId: "missingStateBinding",
+              data: {
+                role: role,
+                ariaAttr: attrName,
+              },
+            });
+            return;
+          }
+        });
+      },
+    };
+  },
+};