eslint-plugin-aria-state-validator 1.1.0 → 1.1.1

package/README.ko.md

@@ -41,18 +41,16 @@ npm install --save-dev eslint-plugin-aria-state-validator
 import ariaStateValidator from "eslint-plugin-aria-state-validator";
 
 export default [
-  {
-    plugins: {
-      "aria-state-validator": ariaStateValidator,
-    },
-    rules: {
-      "aria-state-validator/state-dependent-aria-validator": "warn",
-      "aria-state-validator/static-aria-validator": "warn",
-    },
-  },
+  ...ariaStateValidator.configs["flat/recommended"],
 ];
 ```
 
+사용 가능한 Flat preset:
+- `flat/recommended`
+- `flat/strict`
+- `flat/dynamic-only`
+- `flat/static-only`
+
 ### Legacy ESLintRC Config
 
 ```json
@@ -68,17 +66,17 @@ export default [
 ### 설정 프리셋
 
 ```javascript
-// 권장 설정 (경고)
-...ariaStateValidator.configs.recommended
-
-// 엄격한 설정 (에러)
-...ariaStateValidator.configs.strict
-
-// 동적 검증만
-...ariaStateValidator.configs['dynamic-only']
-
-// 정적 검증만
-...ariaStateValidator.configs['static-only']
+// Flat Config용 preset
+...ariaStateValidator.configs["flat/recommended"]
+...ariaStateValidator.configs["flat/strict"]
+...ariaStateValidator.configs["flat/dynamic-only"]
+...ariaStateValidator.configs["flat/static-only"]
+
+// Legacy eslintrc용 preset
+extends: ["plugin:aria-state-validator/recommended"]
+extends: ["plugin:aria-state-validator/strict"]
+extends: ["plugin:aria-state-validator/dynamic-only"]
+extends: ["plugin:aria-state-validator/static-only"]
 ```
 
 ## 두 가지 규칙으로 포괄적인 ARIA 검증
@@ -89,6 +87,28 @@ export default [
 
 ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동적으로 업데이트되는지 검증합니다.
 
+규칙 옵션:
+- `interactiveHandlers` (`string[]`): 인터랙티브 핸들러로 간주할 이벤트 prop 목록 재정의 (기본값: `onClick`, `onKeyDown`, `onKeyPress`, `onChange`, `onToggle`)
+- `strictBooleanInference` (`boolean`): `true`(기본값)면 불리언으로 추론되는 식별자만 경고, `false`면 식별자 바인딩 전체를 불리언 위험으로 간주
+- `ignorePatterns` (`string[]`): 속성 이름 또는 값 소스 텍스트와 매칭되는 항목을 검사에서 제외할 정규식 패턴
+
+예시:
+
+```javascript
+{
+  rules: {
+    "aria-state-validator/state-dependent-aria-validator": [
+      "warn",
+      {
+        interactiveHandlers: ["onClick", "onPointerDown"],
+        strictBooleanInference: true,
+        ignorePatterns: ["^aria-current$", "^\\{isOpen\\}$"],
+      },
+    ],
+  },
+}
+```
+
 ### 규칙 2: `static-aria-validator` (정적 ARIA 검증)
 
 사용된 ARIA 속성의 **정확성**을 검증합니다:
@@ -118,7 +138,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 <button aria-expanded={isOpen ? 'true' : 'false'}>토글</button>
 ```
 
-**자동 수정 가능:** `eslint --fix`가 자동으로 올바른 문자열 형식으로 변환합니다
+**제안 제공:** 규칙이 문자열 형식(`'true'/'false'`)으로 바꾸는 안전한 제안을 제공합니다.
 
 ### 2. 정적 값 + 인터랙티브 핸들러 감지
 
@@ -136,21 +156,21 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 </button>
 ```
 
-**스마트 자동 수정:** 핸들러에 상태 변수 참조가 있으면 (예: `() => setExpanded(!expanded)`), 플러그인이 자동으로 변수 이름을 추출하여 ARIA 속성에 바인딩합니다:
+**스마트 제안:** 핸들러에 상태 변수 참조가 있으면 (예: `() => setExpanded(!expanded)`), 플러그인이 변수 이름을 추출해 ARIA 속성 바인딩 제안을 제공합니다:
 
 ```jsx
-// ❌ 자동 수정 전
+// ❌ 제안 전
 <div onClick={() => setExpanded(!expanded)} aria-expanded="false">
   클릭하여 확장
 </div>
 
-// ✅ 자동 수정 후 (자동으로 'expanded' 변수 감지)
+// ✅ 제안 적용 후 (자동으로 'expanded' 변수 감지)
 <div onClick={() => setExpanded(!expanded)} aria-expanded={expanded ? 'true' : 'false'}>
   클릭하여 확장
 </div>
 ```
 
-**자동 수정 지원 패턴:**
+**제안 지원 패턴:**
 - `() => setX(!x)`
 - `() => setX(true)`
 - `() => setX(prev => !prev)`
@@ -163,8 +183,8 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 // ❌ 오류: role="button"인데 aria-pressed가 정적
 <div role="button" aria-pressed="false">버튼</div>
 
-// ❌ 오류: role="switch"에 필수 속성 aria-checked 누락
-<div role="switch">토글</div>
+// ❌ 오류: 인터랙티브 switch role에서 aria-checked 누락
+<div role="switch" onClick={toggle}>토글</div>
 
 // ✅ 올바름: 동적 상태 바인딩
 <div role="button" aria-pressed={isPressed ? 'true' : 'false'}>버튼</div>
@@ -329,13 +349,14 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 
 - **기반:** ESLint 플러그인 (Node.js 환경)
 - **파서:** JSX/TSX AST 파싱을 위한 `@babel/eslint-parser` 또는 TypeScript 파서
+- **ARIA 데이터 소스:** 역할-속성 호환성 검증을 위한 `aria-query` 정의 데이터
 - **분석:** JSX 요소에 대한 Visitor 패턴
 
 ### 분석 로직
 
 1. **JSXElement 순회:** `role` 및 `aria-*` 속성 식별
-2. **스코프 추적:** `context.getScope()`를 사용하여 ARIA 속성에 바인딩된 변수 추적
-3. **상태 추론:** 값이 `useState` 훅이나 props에서 파생되었는지 판단
+2. **패턴 분석:** JSX 표현식에서 불리언 유사 바인딩과 정적 값 패턴 감지
+3. **상태 추론 휴리스틱:** 핸들러/세터 패턴(예: `setX(!x)`)에서 상태 변수 추론
 4. **패턴 검증:** 올바른 문자열 변환 패턴 확인
 
 ## 기대 효과
@@ -346,7 +367,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 
 ### 2. 개발자 생산성
 
-`eslint --fix`로 반복적인 ARIA 상태 바인딩 오류를 자동 수정
+반복적인 ARIA 상태 바인딩 오류에 대해 타겟 제안 제공
 
 ### 3. 표준화
 
@@ -360,19 +381,13 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 npm test
 ```
 
-### 빌드
-
-```bash
-npm run build  # 해당되는 경우
-```
-
 ## 기여
 
 기여는 언제나 환영합니다! 이슈나 풀 리퀘스트를 자유롭게 제출해주세요.
 
 ## 라이선스
 
-ISC
+MIT
 
 ## 키워드
 

package/README.md

@@ -40,17 +40,16 @@ npm install --save-dev eslint-plugin-aria-state-validator
 import ariaStateValidator from 'eslint-plugin-aria-state-validator';
 
 export default [
-  {
-    plugins: {
-      'aria-state-validator': ariaStateValidator
-    },
-    rules: {
-      'aria-state-validator/state-dependent-aria-validator': 'warn'
-    }
-  }
+  ...ariaStateValidator.configs['flat/recommended']
 ];
 ```
 
+Available flat presets:
+- `flat/recommended`
+- `flat/strict`
+- `flat/dynamic-only`
+- `flat/static-only`
+
 ### Legacy ESLintRC Config
 
 ```json
@@ -70,6 +69,25 @@ This plugin provides two complementary rules:
 
 Validates that ARIA **state** attributes are properly bound to component state and update dynamically.
 
+Rule options:
+- `interactiveHandlers` (`string[]`): Override which event props are treated as interactive (default: `onClick`, `onKeyDown`, `onKeyPress`, `onChange`, `onToggle`)
+- `strictBooleanInference` (`boolean`): When `true` (default), only flags identifiers inferred as boolean-like; when `false`, treats any identifier binding as boolean-risk
+- `ignorePatterns` (`string[]`): Regex patterns to skip checks for matching attribute names or value source text
+
+Example:
+
+```javascript
+{
+  rules: {
+    'aria-state-validator/state-dependent-aria-validator': ['warn', {
+      interactiveHandlers: ['onClick', 'onPointerDown'],
+      strictBooleanInference: true,
+      ignorePatterns: ['^aria-current$', '^\\{isOpen\\}$']
+    }]
+  }
+}
+```
+
 ### Rule 2: `static-aria-validator` (Static ARIA Validation)
 
 Validates the **correctness** of ARIA attributes when they are used:
@@ -96,7 +114,7 @@ Validates the **correctness** of ARIA attributes when they are used:
 <button aria-expanded={isOpen ? 'true' : 'false'}>Toggle</button>
 ```
 
-**Auto-fix Available:** `eslint --fix` will automatically convert to proper string format
+**Suggestion Available:** The rule provides a safe suggestion to convert bindings to string format (`'true'/'false'`).
 
 ### 2. Static Value + Interactive Handler Detection
 
@@ -114,21 +132,21 @@ Validates the **correctness** of ARIA attributes when they are used:
 </button>
 ```
 
-**Smart Auto-fix:** When the handler contains state variable references (e.g., `() => setExpanded(!expanded)`), the plugin automatically extracts the variable name and binds it to the ARIA attribute:
+**Smart Suggestion:** When the handler contains state variable references (e.g., `() => setExpanded(!expanded)`), the plugin can suggest binding the inferred variable to the ARIA attribute:
 
 ```jsx
-// ❌ Before auto-fix
+// ❌ Before suggestion
 <div onClick={() => setExpanded(!expanded)} aria-expanded="false">
   Click to expand
 </div>
 
-// ✅ After auto-fix (automatically detects 'expanded' variable)
+// ✅ Suggested fix (automatically detects 'expanded' variable)
 <div onClick={() => setExpanded(!expanded)} aria-expanded={expanded ? 'true' : 'false'}>
   Click to expand
 </div>
 ```
 
-**Supported Patterns for Auto-fix:**
+**Supported Patterns for Suggestions:**
 - `() => setX(!x)`
 - `() => setX(true)`
 - `() => setX(prev => !prev)`
@@ -141,8 +159,8 @@ Validates the **correctness** of ARIA attributes when they are used:
 // ❌ Error: role="button" with static aria-pressed
 <div role="button" aria-pressed="false">Button</div>
 
-// ❌ Error: role="switch" missing aria-checked
-<div role="switch">Toggle</div>
+// ❌ Error: interactive switch role missing aria-checked
+<div role="switch" onClick={toggle}>Toggle</div>
 
 // ✅ Correct: Dynamic state binding
 <div role="button" aria-pressed={isPressed ? 'true' : 'false'}>Button</div>
@@ -307,13 +325,14 @@ Elements with these roles are expected to have dynamic ARIA states:
 
 - **Base:** ESLint plugin (Node.js environment)
 - **Parser:** `@babel/eslint-parser` or TypeScript parser for JSX/TSX AST parsing
+- **ARIA Data Source:** `aria-query` role/property definitions for role-attribute compatibility
 - **Analysis:** Visitor pattern on JSX elements
 
 ### Analysis Logic
 
 1. **JSXElement Traversal:** Identifies `role` and `aria-*` attributes
-2. **Scope Tracking:** Uses `context.getScope()` to trace variables bound to ARIA attributes
-3. **State Inference:** Determines if values derive from `useState` hooks or props
+2. **Pattern Analysis:** Detects boolean-like bindings and static-value patterns in JSX expressions
+3. **State Inference Heuristics:** Infers likely state variables from handler/setter patterns (e.g., `setX(!x)`)
 4. **Pattern Validation:** Checks for proper string conversion patterns
 
 ## Expected Benefits
@@ -324,7 +343,7 @@ Catch dynamic ARIA errors at build/CI phase instead of runtime
 
 ### 2. Developer Productivity
 
-Auto-fix repetitive ARIA state binding errors with `eslint --fix`
+Apply targeted suggestions for repetitive ARIA state binding errors
 
 ### 3. Standardization
 
@@ -338,19 +357,13 @@ Enforce consistent dynamic ARIA usage patterns across projects
 npm test
 ```
 
-### Building
-
-```bash
-npm run build  # If applicable
-```
-
 ## Contributing
 
 Contributions welcome! Please feel free to submit issues or pull requests.
 
 ## License
 
-ISC
+MIT
 
 ## Keywords
 

package/index.js

@@ -1,7 +1,7 @@
 const stateDependentAriaValidator = require('./lib/rules/state-dependent-aria-validator');
 const staticAriaValidator = require('./lib/rules/static-aria-validator');
 
-module.exports = {
+const plugin = {
   rules: {
     'state-dependent-aria-validator': stateDependentAriaValidator,
     'static-aria-validator': staticAriaValidator
@@ -35,3 +35,51 @@ module.exports = {
     }
   }
 };
+
+plugin.configs['flat/recommended'] = [
+  {
+    plugins: {
+      'aria-state-validator': plugin
+    },
+    rules: {
+      'aria-state-validator/state-dependent-aria-validator': 'warn',
+      'aria-state-validator/static-aria-validator': 'warn'
+    }
+  }
+];
+
+plugin.configs['flat/strict'] = [
+  {
+    plugins: {
+      'aria-state-validator': plugin
+    },
+    rules: {
+      'aria-state-validator/state-dependent-aria-validator': 'error',
+      'aria-state-validator/static-aria-validator': 'error'
+    }
+  }
+];
+
+plugin.configs['flat/dynamic-only'] = [
+  {
+    plugins: {
+      'aria-state-validator': plugin
+    },
+    rules: {
+      'aria-state-validator/state-dependent-aria-validator': 'warn'
+    }
+  }
+];
+
+plugin.configs['flat/static-only'] = [
+  {
+    plugins: {
+      'aria-state-validator': plugin
+    },
+    rules: {
+      'aria-state-validator/static-aria-validator': 'warn'
+    }
+  }
+];
+
+module.exports = plugin;

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

@@ -94,6 +94,29 @@ const INTERACTIVE_ROLES = [
   "listbox",
 ];
 
+const ROLE_REQUIRED_DYNAMIC_ARIA = {
+  switch: "aria-checked",
+  checkbox: "aria-checked",
+  radio: "aria-checked",
+  menuitemcheckbox: "aria-checked",
+  menuitemradio: "aria-checked",
+  tab: "aria-selected",
+  option: "aria-selected",
+  treeitem: "aria-selected",
+  slider: "aria-valuenow",
+  progressbar: "aria-valuenow",
+  scrollbar: "aria-valuenow",
+  spinbutton: "aria-valuenow",
+};
+
+const DEFAULT_INTERACTIVE_HANDLERS = [
+  "onClick",
+  "onKeyDown",
+  "onKeyPress",
+  "onChange",
+  "onToggle",
+];
+
 module.exports = {
   meta: {
     type: "problem",
@@ -102,10 +125,28 @@ module.exports = {
         "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",
+      url: "https://github.com/comento/eslint-plugin-aria-state-validator",
     },
-    fixable: "code",
-    schema: [],
+    hasSuggestions: true,
+    schema: [
+      {
+        type: "object",
+        properties: {
+          interactiveHandlers: {
+            type: "array",
+            items: { type: "string" },
+          },
+          strictBooleanInference: {
+            type: "boolean",
+          },
+          ignorePatterns: {
+            type: "array",
+            items: { type: "string" },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
     messages: {
       booleanBinding:
         'ARIA attribute "{{ariaAttr}}" should not directly bind Boolean values. Convert to string.',
@@ -115,10 +156,152 @@ module.exports = {
         'Element with role="{{role}}" should have "{{ariaAttr}}" attribute bound to dynamic state.',
       invalidStaticValue:
         'Static value "{{value}}" for "{{ariaAttr}}" should be managed with dynamic state.',
+      suggestStringConversion:
+        'Convert "{{ariaAttr}}" binding to explicit string ("true"/"false") conversion.',
+      suggestStateBinding:
+        'Replace static "{{ariaAttr}}" value with inferred state binding.',
     },
   },
 
   create(context) {
+    const sourceCode = context.getSourceCode();
+    const options = context.options[0] || {};
+    const strictBooleanInference = options.strictBooleanInference !== false;
+    const interactiveHandlers =
+      Array.isArray(options.interactiveHandlers) &&
+      options.interactiveHandlers.length > 0
+        ? options.interactiveHandlers
+        : DEFAULT_INTERACTIVE_HANDLERS;
+    const ignoreRegexes = Array.isArray(options.ignorePatterns)
+      ? options.ignorePatterns
+          .map((pattern) => {
+            try {
+              return new RegExp(pattern);
+            } catch {
+              return null;
+            }
+          })
+          .filter(Boolean)
+      : [];
+
+    function matchesIgnorePattern(text) {
+      if (!text || ignoreRegexes.length === 0) return false;
+      return ignoreRegexes.some((regex) => regex.test(text));
+    }
+
+    function getVariableFromScope(identifierNode) {
+      if (!identifierNode || identifierNode.type !== "Identifier") return null;
+      if (!sourceCode.getScope) return null;
+
+      const scope = sourceCode.getScope(identifierNode);
+      let currentScope = scope;
+
+      while (currentScope) {
+        if (currentScope.set && currentScope.set.has(identifierNode.name)) {
+          return currentScope.set.get(identifierNode.name);
+        }
+        currentScope = currentScope.upper;
+      }
+
+      return null;
+    }
+
+    function isBooleanishExpression(expr) {
+      if (!expr) return false;
+
+      if (expr.type === "Literal" && typeof expr.value === "boolean") {
+        return true;
+      }
+
+      if (
+        expr.type === "UnaryExpression" &&
+        (expr.operator === "!" || expr.operator === "!!")
+      ) {
+        return true;
+      }
+
+      if (
+        expr.type === "BinaryExpression" &&
+        ["==", "===", "!=", "!==", "<", "<=", ">", ">="].includes(expr.operator)
+      ) {
+        return true;
+      }
+
+      if (expr.type === "LogicalExpression") {
+        return true;
+      }
+
+      if (
+        expr.type === "CallExpression" &&
+        expr.callee.type === "Identifier" &&
+        expr.callee.name === "Boolean"
+      ) {
+        return true;
+      }
+
+      if (expr.type === "ConditionalExpression") {
+        return (
+          isBooleanishExpression(expr.consequent) &&
+          isBooleanishExpression(expr.alternate)
+        );
+      }
+
+      return false;
+    }
+
+    function isIdentifierFromBooleanState(variable, identifierName) {
+      if (!variable || !Array.isArray(variable.defs)) return false;
+
+      return variable.defs.some((def) => {
+        const declarator = def.node;
+        if (!declarator || declarator.type !== "VariableDeclarator") return false;
+
+        if (
+          declarator.id &&
+          declarator.id.type === "ArrayPattern" &&
+          declarator.init &&
+          declarator.init.type === "CallExpression" &&
+          declarator.init.callee &&
+          declarator.init.callee.type === "Identifier" &&
+          declarator.init.callee.name === "useState"
+        ) {
+          const hasIdentifier = declarator.id.elements.some(
+            (element) =>
+              element &&
+              element.type === "Identifier" &&
+              element.name === identifierName
+          );
+          if (!hasIdentifier) return false;
+
+          const firstArg = declarator.init.arguments[0];
+          return Boolean(
+            firstArg &&
+              ((firstArg.type === "Literal" &&
+                typeof firstArg.value === "boolean") ||
+                isBooleanishExpression(firstArg))
+          );
+        }
+
+        return Boolean(
+          declarator.id &&
+            declarator.id.type === "Identifier" &&
+            declarator.id.name === identifierName &&
+            isBooleanishExpression(declarator.init)
+        );
+      });
+    }
+
+    function hasBooleanLikeName(name) {
+      if (!name) return false;
+
+      const strictBooleanPatterns = [
+        /^(is|has|can|should|did|will|was|were)[A-Z_]/,
+        /^(open|opened|expanded|selected|checked|pressed|hidden|disabled|active|visible|loading|mounted)$/i,
+      ];
+
+      return strictBooleanPatterns.some((pattern) => pattern.test(name));
+    }
+
     function isStaticValue(node) {
       if (!node) return false;
 
@@ -154,7 +337,17 @@ module.exports = {
       const expression = node.expression;
 
       if (expression.type === "Identifier") {
-        return true;
+        if (matchesIgnorePattern(expression.name)) {
+          return false;
+        }
+        if (!strictBooleanInference) {
+          return true;
+        }
+        const variable = getVariableFromScope(expression);
+        return (
+          hasBooleanLikeName(expression.name) ||
+          isIdentifierFromBooleanState(variable, expression.name)
+        );
       }
 
       if (expression.type === "LogicalExpression") {
@@ -212,14 +405,6 @@ module.exports = {
     }
 
     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;
@@ -325,7 +510,6 @@ module.exports = {
     }
 
     function createStringConversionFix(fixer, node) {
-      const sourceCode = context.getSourceCode();
       const expression = node.expression;
 
       let identifierName;
@@ -354,6 +538,31 @@ module.exports = {
         const attributes = node.attributes || [];
         const hasHandler = hasInteractiveHandler(attributes);
         const role = getRoleValue(attributes);
+        const presentAriaAttrs = new Set(
+          attributes
+            .filter(
+              (attr) =>
+                attr.type === "JSXAttribute" &&
+                attr.name &&
+                typeof attr.name.name === "string" &&
+                attr.name.name.startsWith("aria-")
+            )
+            .map((attr) => attr.name.name)
+        );
+
+        if (role && hasHandler && ROLE_REQUIRED_DYNAMIC_ARIA[role]) {
+          const requiredAria = ROLE_REQUIRED_DYNAMIC_ARIA[role];
+          if (!presentAriaAttrs.has(requiredAria)) {
+            context.report({
+              node: node.name,
+              messageId: "missingStateBinding",
+              data: {
+                role,
+                ariaAttr: requiredAria,
+              },
+            });
+          }
+        }
 
         attributes.forEach((attr) => {
           if (attr.type !== "JSXAttribute") return;
@@ -361,8 +570,11 @@ module.exports = {
           const attrName = attr.name.name;
 
           if (!DYNAMIC_ARIA_ATTRIBUTES[attrName]) return;
+          if (matchesIgnorePattern(attrName)) return;
 
           const attrValue = attr.value;
+          if (!attrValue) return;
+          if (matchesIgnorePattern(sourceCode.getText(attrValue))) return;
 
           if (
             isBooleanIdentifier(attrValue) &&
@@ -376,9 +588,15 @@ module.exports = {
               data: {
                 ariaAttr: attrName,
               },
-              fix(fixer) {
-                return createStringConversionFix(fixer, attrValue);
-              },
+              suggest: [
+                {
+                  messageId: "suggestStringConversion",
+                  data: { ariaAttr: attrName },
+                  fix(fixer) {
+                    return createStringConversionFix(fixer, attrValue);
+                  },
+                },
+              ],
             });
             return;
           }
@@ -387,7 +605,7 @@ module.exports = {
             const handlers = attributes.filter(
               (a) =>
                 a.type === "JSXAttribute" &&
-                ["onClick", "onKeyDown", "onChange"].includes(a.name.name)
+                interactiveHandlers.includes(a.name.name)
             );
 
             const handlerNames = handlers.map((a) => a.name.name);
@@ -398,6 +616,9 @@ module.exports = {
               stateVariable = extractStateVariableFromHandler(handler);
               if (stateVariable) break;
             }
+            if (matchesIgnorePattern(stateVariable)) {
+              stateVariable = null;
+            }
 
             context.report({
               node: attr,
@@ -406,13 +627,19 @@ module.exports = {
                 ariaAttr: attrName,
                 handler: handlerNames.join(", "),
               },
-              fix: stateVariable
-                ? (fixer) => {
-                    return fixer.replaceText(
-                      attrValue,
-                      `{${stateVariable} ? 'true' : 'false'}`
-                    );
-                  }
+              suggest: stateVariable
+                ? [
+                    {
+                      messageId: "suggestStateBinding",
+                      data: { ariaAttr: attrName },
+                      fix(fixer) {
+                        return fixer.replaceText(
+                          attrValue,
+                          `{${stateVariable} ? 'true' : 'false'}`
+                        );
+                      },
+                    },
+                  ]
                 : undefined,
             });
             return;

package/lib/rules/static-aria-validator.js

@@ -5,6 +5,8 @@
 
 "use strict";
 
+const { roles: ARIA_ROLES } = require("aria-query");
+
 // Valid ARIA properties according to ARIA 1.2 spec
 const VALID_ARIA_PROPS = new Set([
   // Widget attributes
@@ -86,7 +88,7 @@ const ARIA_TYPOS = {
   "aria-check": "aria-checked",
 };
 
-// Roles and their required/allowed attributes
+// Fallback role definitions when aria-query data is unavailable for a role.
 const ROLE_DEFINITIONS = {
   checkbox: {
     required: ["aria-checked"],
@@ -178,7 +180,7 @@ module.exports = {
       description: "Validate static ARIA attributes for correctness",
       category: "Accessibility",
       recommended: true,
-      url: "https://github.com/your-repo/eslint-plugin-aria-state-validator",
+      url: "https://github.com/comento/eslint-plugin-aria-state-validator",
     },
     fixable: "code",
     schema: [],
@@ -292,10 +294,38 @@ module.exports = {
             role: roleValue,
             element: elementName,
           },
+          fix(fixer) {
+            const [start, end] = roleAttr.range;
+            const removeStart =
+              start > 0 && sourceCode.text[start - 1] === " " ? start - 1 : start;
+            return fixer.removeRange([removeStart, end]);
+          },
         });
       }
     }
 
+    function getRoleSpec(roleValue) {
+      if (!roleValue) return null;
+
+      const ariaRole = ARIA_ROLES.get(roleValue);
+      if (ariaRole) {
+        return {
+          required: Object.keys(ariaRole.requiredProps || {}),
+          allowedSet: new Set(Object.keys(ariaRole.props || {})),
+        };
+      }
+
+      if (ROLE_DEFINITIONS[roleValue]) {
+        const fallback = ROLE_DEFINITIONS[roleValue];
+        return {
+          required: fallback.required,
+          allowedSet: new Set([...fallback.required, ...fallback.allowed]),
+        };
+      }
+
+      return null;
+    }
+
     return {
       JSXOpeningElement(node) {
         const attributes = node.attributes || [];
@@ -308,10 +338,11 @@ module.exports = {
           (attr) => attr.type === "JSXAttribute" && attr.name.name === "role"
         );
         const roleValue = getAttributeValue(roleAttr);
+        const roleSpec = getRoleSpec(roleValue);
 
         // Required ARIA attributes for role
-        if (roleValue && ROLE_DEFINITIONS[roleValue]) {
-          const required = ROLE_DEFINITIONS[roleValue].required;
+        if (roleValue && roleSpec) {
+          const required = roleSpec.required;
           const present = attributes
             .filter((attr) => attr.type === "JSXAttribute" && attr.name.name.startsWith("aria-"))
             .map((attr) => attr.name.name);
@@ -388,22 +419,14 @@ module.exports = {
             return;
           }
 
-          // Check for role-attribute compatibility
-          if (roleValue && ROLE_DEFINITIONS[roleValue]) {
-            const definition = ROLE_DEFINITIONS[roleValue];
-            const allAllowed = [...definition.required, ...definition.allowed, "aria-label", "aria-labelledby", "aria-describedby", "aria-hidden", "aria-live", "aria-atomic", "aria-busy"];
-            
-            if (!allAllowed.includes(attrName) && !attrName.startsWith("aria-own") && !attrName.startsWith("aria-control")) {
-               // This is a bit simplified, but good for catching obvious mismatches
-               // e.g., role="img" with aria-expanded
-               if (roleValue === "img" && attrName === "aria-expanded") {
-                  context.report({
-                    node: attr,
-                    messageId: "disallowedAriaForRole",
-                    data: { prop: attrName, role: roleValue },
-                  });
-               }
-            }
+          // Check role-attribute compatibility from aria-query role props.
+          if (roleValue && roleSpec && roleSpec.allowedSet.size > 0 && !roleSpec.allowedSet.has(attrName)) {
+            context.report({
+              node: attr,
+              messageId: "disallowedAriaForRole",
+              data: { prop: attrName, role: roleValue },
+            });
+            return;
           }
 
           const value = getAttributeValue(attr);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-aria-state-validator",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Comprehensive ESLint plugin for ARIA accessibility validation: dynamic state binding and static ARIA attributes correctness",
   "main": "index.js",
   "files": [
@@ -50,8 +50,12 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
+    "@typescript-eslint/parser": "^8.57.2",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.5",
     "jest": "^30.2.0"
+  },
+  "dependencies": {
+    "aria-query": "^5.3.2"
   }
 }