eslint-plugin-aria-state-validator 1.0.1 → 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,14 +87,38 @@ 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 속성의 **정확성**을 검증합니다:
 
-- 유효한 ARIA 속성 이름 (오타 감지)
-- Boolean 및 Enum ARIA 속성의 올바른 값
-- 충돌하는 ARIA 속성 감지
-- 네이티브 HTML 요소의 중복 role 감지
+- 유효한 ARIA 속성 이름 (오타 감지 및 **자동 수정**)
+- Boolean 및 Enum ARIA 속성의 올바른 값 (**자동 수정** 지원)
+- 충돌하는 ARIA 속성 감지 (**자동 수정** 지원)
+- 네이티브 HTML 요소의 중복 role 감지 (**자동 수정** 지원)
+- **역할별 필수 ARIA 속성** 검증 (예: `switch` 역할의 `aria-checked` 필수 사용)
+- **역할-속성 호환성** 검증 (예: `img` 역할에 `aria-expanded` 사용 방지)
 
 **참고:** 이 플러그인은 ARIA 속성을 **어떻게** 사용하는지를 검증하며, **사용 여부**를 강제하지는 않습니다. 접근성 기능의 존재를 강제하려면 [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)를 사용하세요.
 
@@ -116,7 +138,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 <button aria-expanded={isOpen ? 'true' : 'false'}>토글</button>
 ```
 
-**자동 수정 가능:** `eslint --fix`가 자동으로 올바른 문자열 형식으로 변환합니다
+**제안 제공:** 규칙이 문자열 형식(`'true'/'false'`)으로 바꾸는 안전한 제안을 제공합니다.
 
 ### 2. 정적 값 + 인터랙티브 핸들러 감지
 
@@ -134,30 +156,39 @@ 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)`
+
 ### 3. 역할 기반 상태 연관성 검증
 
-**감지 내용:** 정적 ARIA 상태를 가진 인터랙티브 역할
+**감지 내용:** 인터랙티브 역할(Role)에 정적인 ARIA 상태를 사용하거나 필수 속성이 누락된 경우.
 
 ```jsx
 // ❌ 오류: role="button"인데 aria-pressed가 정적
 <div role="button" aria-pressed="false">버튼</div>
 
+// ❌ 오류: 인터랙티브 switch role에서 aria-checked 누락
+<div role="switch" onClick={toggle}>토글</div>
+
 // ✅ 올바름: 동적 상태 바인딩
 <div role="button" aria-pressed={isPressed ? 'true' : 'false'}>버튼</div>
+<div role="switch" aria-checked={isChecked ? 'true' : 'false'}>토글</div>
 ```
 
 ---
@@ -193,7 +224,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 **감지 내용:** 잘못된 boolean 형식 값
 
 ```jsx
-// ❌ 오류: 유효하지 않은 boolean 값
+// ❌ 오류: 유효하지 않은 boolean 값 ("yes"/"no"는 자동 수정 지원)
 <div aria-hidden="yes">내용</div>
 <div aria-disabled="1">내용</div>
 
@@ -252,12 +283,15 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 
 - `aria-expanded` - 토글 버튼, 확장 가능한 요소
 - `aria-selected` - 탭, 선택 가능한 옵션
-- `aria-checked` - 체크박스, 라디오 버튼
+- `aria-checked` - 체크박스, 라디오 버튼, 스위치
 - `aria-pressed` - 토글 버튼
 - `aria-hidden` - 동적으로 표시/숨김되는 요소
 - `aria-disabled` - 동적으로 활성화/비활성화되는 요소
 - `aria-modal` - 다이얼로그, 모달
 - `aria-current` - 현재 활성 항목 표시
+- `aria-valuenow`, `aria-valuemin`, `aria-valuemax` - 수치 입력 위젯 (슬라이더, 프로그레스 바 등)
+- `aria-level` - 계층 구조 레벨
+- `aria-posinset`, `aria-setsize` - 세트 내 위치 및 전체 크기
 
 ## 지원하는 인터랙티브 역할
 
@@ -265,7 +299,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 
 - `button`, `tab`, `checkbox`, `radio`, `switch`
 - `menuitem`, `menuitemcheckbox`, `menuitemradio`
-- `option`, `treeitem`
+- `option`, `treeitem`, `slider`, `progressbar`
 - `dialog`, `alertdialog`
 
 ## 예제
@@ -315,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. **패턴 검증:** 올바른 문자열 변환 패턴 확인
 
 ## 기대 효과
@@ -332,7 +367,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 
 ### 2. 개발자 생산성
 
-`eslint --fix`로 반복적인 ARIA 상태 바인딩 오류를 자동 수정
+반복적인 ARIA 상태 바인딩 오류에 대해 타겟 제안 제공
 
 ### 3. 표준화
 
@@ -346,12 +381,6 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 npm test
 ```
 
-### 빌드
-
-```bash
-npm run build  # 해당되는 경우
-```
-
 ## 기여
 
 기여는 언제나 환영합니다! 이슈나 풀 리퀘스트를 자유롭게 제출해주세요.

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,13 +69,34 @@ 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:
-- Valid ARIA property names (catches typos)
-- Correct values for boolean and enum ARIA attributes
-- No conflicting ARIA attributes
-- No redundant roles on native HTML elements
+- Valid ARIA property names (catches typos with **auto-fix**)
+- Correct values for boolean and enum ARIA attributes (**auto-fix** for "yes"/"no")
+- No conflicting ARIA attributes (**auto-fix** available)
+- No redundant roles on native HTML elements (**auto-fix** available)
+- **Required ARIA attributes** based on roles (e.g., `aria-checked` for `switch`)
+- **Role-attribute compatibility** (e.g., prevents `aria-expanded` on `img`)
 
 **Note:** This plugin validates **how** ARIA attributes are used, not **whether** they should be used. For enforcing the presence of accessibility features, use [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y).
 
@@ -94,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
 
@@ -112,30 +132,39 @@ 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 Suggestions:**
+- `() => setX(!x)`
+- `() => setX(true)`
+- `() => setX(prev => !prev)`
+
 ### 3. Role-Based State Association Validation
 
-**Detects:** Interactive roles with static ARIA states
+**Detects:** Interactive roles with static ARIA states or missing required states.
 
 ```jsx
 // ❌ Error: role="button" with static aria-pressed
 <div role="button" aria-pressed="false">Button</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>
+<div role="switch" aria-checked={isChecked ? 'true' : 'false'}>Toggle</div>
 ```
 
 ---
@@ -150,7 +179,7 @@ Validates the **correctness** of ARIA attributes when they are used:
 // ❌ Error: Typo in aria-label
 <button aria-labell="Close">X</button>
 
-// ✅ Correct: Proper spelling
+// ✅ Correct (Auto-fixed): Proper spelling
 <button aria-label="Close">X</button>
 ```
 
@@ -171,7 +200,7 @@ Validates the **correctness** of ARIA attributes when they are used:
 **Detects:** Incorrect boolean-like values
 
 ```jsx
-// ❌ Error: Invalid boolean value
+// ❌ Error: Invalid boolean value (Auto-fix available for "yes"/"no")
 <div aria-hidden="yes">Content</div>
 <div aria-disabled="1">Content</div>
 
@@ -230,12 +259,15 @@ The plugin validates these dynamic ARIA state attributes:
 
 - `aria-expanded` - Toggle buttons, expandable elements
 - `aria-selected` - Tabs, selectable options
-- `aria-checked` - Checkboxes, radio buttons
+- `aria-checked` - Checkboxes, radio buttons, switches
 - `aria-pressed` - Toggle buttons
 - `aria-hidden` - Dynamically shown/hidden elements
 - `aria-disabled` - Dynamically enabled/disabled elements
 - `aria-modal` - Dialogs, modals
 - `aria-current` - Current active item indicators
+- `aria-valuenow`, `aria-valuemin`, `aria-valuemax` - Range widgets (sliders, progress bars)
+- `aria-level` - Hierarchical level
+- `aria-posinset`, `aria-setsize` - Set position and size
 
 ## Supported Interactive Roles
 
@@ -243,7 +275,7 @@ Elements with these roles are expected to have dynamic ARIA states:
 
 - `button`, `tab`, `checkbox`, `radio`, `switch`
 - `menuitem`, `menuitemcheckbox`, `menuitemradio`
-- `option`, `treeitem`
+- `option`, `treeitem`, `slider`, `progressbar`
 - `dialog`, `alertdialog`
 
 ## Examples
@@ -293,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
@@ -310,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
 
@@ -324,12 +357,6 @@ 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.

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

@@ -46,6 +46,30 @@ const DYNAMIC_ARIA_ATTRIBUTES = {
     validValues: ["page", "step", "location", "date", "time", "true", "false"],
     description: "Current active item indicator",
   },
+  "aria-valuenow": {
+    requiresState: true,
+    description: "Current value for range widgets",
+  },
+  "aria-valuemin": {
+    requiresState: true,
+    description: "Minimum value for range widgets",
+  },
+  "aria-valuemax": {
+    requiresState: true,
+    description: "Maximum value for range widgets",
+  },
+  "aria-level": {
+    requiresState: true,
+    description: "Hierarchical level of an element",
+  },
+  "aria-posinset": {
+    requiresState: true,
+    description: "Position of an element in a set",
+  },
+  "aria-setsize": {
+    requiresState: true,
+    description: "Total size of a set",
+  },
 };
 
 const INTERACTIVE_ROLES = [
@@ -61,6 +85,36 @@ const INTERACTIVE_ROLES = [
   "treeitem",
   "dialog",
   "alertdialog",
+  "slider",
+  "progressbar",
+  "scrollbar",
+  "spinbutton",
+  "tree",
+  "grid",
+  "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 = {
@@ -71,10 +125,28 @@ module.exports = {
         "Validate that ARIA state attributes are properly bound to component state",
       category: "Accessibility",
       recommended: true,
-      url: "https://github.com/SangWoo9734/eslint-plugin-aria-state-validator#readme",
+      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.',
@@ -84,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;
 
@@ -123,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") {
@@ -181,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;
@@ -224,55 +440,76 @@ module.exports = {
 
       const expression = handlerAttr.value.expression;
 
-      // Arrow function or function expression
+      // Direct call or arrow function/function expression
+      let functionBody = null;
       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;
-              }
+        functionBody = expression.body;
+      }
+
+      if (!functionBody) return null;
+
+      // Find setState calls in the body
+      let stateVariable = null;
+
+      const checkCallExpression = (callExpr) => {
+        if (callExpr.type !== "CallExpression") return null;
+        
+        // Simple case: setX(!x), setX(true), setX(false)
+        if (callExpr.arguments.length > 0) {
+          const arg = callExpr.arguments[0];
+          
+          // Pattern: !x
+          if (arg.type === "UnaryExpression" && arg.operator === "!") {
+            if (arg.argument.type === "Identifier") {
+              return arg.argument.name;
+            }
+          }
+          
+          // Pattern: boolean literal (true/false)
+          if (arg.type === "Literal" && typeof arg.value === "boolean") {
+            // We can't easily know which state it's setting from just 'true', 
+            // but we can look at the setter name if it follows 'setX' pattern
+            const callee = callExpr.callee;
+            if (callee.type === "Identifier" && callee.name.startsWith("set")) {
+              const varName = callee.name.slice(3);
+              return varName.charAt(0).toLowerCase() + varName.slice(1);
             }
           }
-        }
 
-        // 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;
-                  }
-                }
-              }
+          // Pattern: prev => !prev (functional update)
+          if (arg.type === "ArrowFunctionExpression" && arg.body.type === "UnaryExpression" && arg.body.operator === "!") {
+             const callee = callExpr.callee;
+             if (callee.type === "Identifier" && callee.name.startsWith("set")) {
+              const varName = callee.name.slice(3);
+              return varName.charAt(0).toLowerCase() + varName.slice(1);
             }
           }
         }
+        return null;
+      };
 
-        return stateVariable;
+      // Simple case: () => setX(!x)
+      if (functionBody.type === "CallExpression") {
+        stateVariable = checkCallExpression(functionBody);
       }
 
-      return null;
+      // Block statement case: () => { setX(!x); }
+      if (functionBody.type === "BlockStatement" && functionBody.body.length > 0) {
+        for (const stmt of functionBody.body) {
+          if (stmt.type === "ExpressionStatement") {
+            stateVariable = checkCallExpression(stmt.expression);
+            if (stateVariable) break;
+          }
+        }
+      }
+
+      return stateVariable;
     }
 
     function createStringConversionFix(fixer, node) {
-      const sourceCode = context.getSourceCode();
       const expression = node.expression;
 
       let identifierName;
@@ -301,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;
@@ -308,12 +570,17 @@ 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) &&
-            !hasProperStringConversion(attrValue)
+            !hasProperStringConversion(attrValue) &&
+            DYNAMIC_ARIA_ATTRIBUTES[attrName].validValues &&
+            (DYNAMIC_ARIA_ATTRIBUTES[attrName].validValues.includes("true") || DYNAMIC_ARIA_ATTRIBUTES[attrName].validValues.includes("false"))
           ) {
             context.report({
               node: attr,
@@ -321,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;
           }
@@ -332,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);
@@ -343,6 +616,9 @@ module.exports = {
               stateVariable = extractStateVariableFromHandler(handler);
               if (stateVariable) break;
             }
+            if (matchesIgnorePattern(stateVariable)) {
+              stateVariable = null;
+            }
 
             context.report({
               node: attr,
@@ -351,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
@@ -76,6 +78,56 @@ const REQUIRES_VALUE = new Set([
   "aria-flowto",
 ]);
 
+// Common ARIA typos and their correct versions
+const ARIA_TYPOS = {
+  "aria-labell": "aria-label",
+  "aria-hidde": "aria-hidden",
+  "aria-expect": "aria-expanded",
+  "aria-describeb": "aria-describedby",
+  "aria-control": "aria-controls",
+  "aria-check": "aria-checked",
+};
+
+// Fallback role definitions when aria-query data is unavailable for a role.
+const ROLE_DEFINITIONS = {
+  checkbox: {
+    required: ["aria-checked"],
+    allowed: ["aria-readonly", "aria-disabled"],
+  },
+  radio: {
+    required: ["aria-checked"],
+    allowed: ["aria-disabled"],
+  },
+  combobox: {
+    required: ["aria-controls", "aria-expanded"],
+    allowed: ["aria-haspopup", "aria-autocomplete", "aria-required"],
+  },
+  tab: {
+    required: ["aria-selected"],
+    allowed: ["aria-disabled"],
+  },
+  slider: {
+    required: ["aria-valuenow"],
+    allowed: ["aria-valuemin", "aria-valuemax", "aria-orientation", "aria-readonly"],
+  },
+  switch: {
+    required: ["aria-checked"],
+    allowed: ["aria-readonly", "aria-disabled"],
+  },
+  scrollbar: {
+    required: ["aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-orientation"],
+    allowed: ["aria-controls"],
+  },
+  heading: {
+    required: ["aria-level"],
+    allowed: [],
+  },
+  img: {
+    required: [],
+    allowed: ["aria-label", "aria-labelledby"],
+  },
+};
+
 // Valid values for boolean-like ARIA attributes
 const BOOLEAN_ARIA_VALUES = new Set(["true", "false"]);
 
@@ -128,9 +180,9 @@ module.exports = {
       description: "Validate static ARIA attributes for correctness",
       category: "Accessibility",
       recommended: true,
-      url: "https://github.com/SangWoo9734/eslint-plugin-aria-state-validator#readme",
+      url: "https://github.com/comento/eslint-plugin-aria-state-validator",
     },
-    fixable: null,
+    fixable: "code",
     schema: [],
     messages: {
       invalidAriaProp:
@@ -145,10 +197,17 @@ module.exports = {
         "Do not use both aria-label and aria-labelledby. aria-labelledby takes precedence.",
       redundantRole:
         'Redundant role "{{role}}" on <{{element}}>. Native HTML semantics already convey this role.',
+      missingRequiredAria:
+        'Role "{{role}}" requires the following ARIA attributes: {{missing}}.',
+      disallowedAriaForRole:
+        'ARIA attribute "{{prop}}" is not recommended for role "{{role}}".',
+      ariaTypo:
+        'Invalid ARIA attribute "{{prop}}". Did you mean "{{correct}}"?',
     },
   },
 
   create(context) {
+    const sourceCode = context.getSourceCode();
     // Elements with implicit roles
     const IMPLICIT_ROLES = {
       a: "link", // when href present
@@ -170,7 +229,7 @@ module.exports = {
     };
 
     function getAttributeValue(attr) {
-      if (!attr.value) return null;
+      if (!attr || !attr.value) return null;
 
       if (attr.value.type === "Literal") {
         return attr.value.value;
@@ -235,17 +294,72 @@ 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 || [];
+        const elementName = node.name.name;
 
         // Check for redundant roles
         checkRedundantRole(node);
 
+        const roleAttr = attributes.find(
+          (attr) => attr.type === "JSXAttribute" && attr.name.name === "role"
+        );
+        const roleValue = getAttributeValue(roleAttr);
+        const roleSpec = getRoleSpec(roleValue);
+
+        // Required ARIA attributes for role
+        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);
+          
+          const missing = required.filter((req) => !present.includes(req));
+          if (missing.length > 0) {
+            context.report({
+              node: roleAttr || node.name,
+              messageId: "missingRequiredAria",
+              data: {
+                role: roleValue,
+                missing: missing.join(", "),
+              },
+            });
+          }
+        }
+
         // Check for conflicting aria-label and aria-labelledby
         const hasAriaLabel = attributes.some(
           (attr) =>
@@ -264,6 +378,9 @@ module.exports = {
           context.report({
             node: ariaLabelAttr,
             messageId: "ariaLabelWithLabelledBy",
+            fix(fixer) {
+              return fixer.remove(ariaLabelAttr);
+            }
           });
         }
 
@@ -273,6 +390,22 @@ module.exports = {
 
           const attrName = attr.name.name;
 
+          // Check for typos in aria- attributes
+          if (attrName.startsWith("aria-") && !VALID_ARIA_PROPS.has(attrName)) {
+            const correct = ARIA_TYPOS[attrName];
+            if (correct) {
+              context.report({
+                node: attr.name,
+                messageId: "ariaTypo",
+                data: { prop: attrName, correct: correct },
+                fix(fixer) {
+                  return fixer.replaceText(attr.name, correct);
+                }
+              });
+              return;
+            }
+          }
+
           // Only check aria-* attributes
           if (!attrName.startsWith("aria-")) return;
 
@@ -286,6 +419,16 @@ module.exports = {
             return;
           }
 
+          // 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);
 
           // Can't validate dynamic values
@@ -331,6 +474,11 @@ module.exports = {
                 node: attr,
                 messageId: "invalidBooleanValue",
                 data: { prop: attrName, value: String(value) },
+                fix(fixer) {
+                  if (value === "yes" || value === "1") return fixer.replaceText(attr.value, '"true"');
+                  if (value === "no" || value === "0") return fixer.replaceText(attr.value, '"false"');
+                  return null;
+                }
               });
               return;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-aria-state-validator",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "Comprehensive ESLint plugin for ARIA accessibility validation: dynamic state binding and static ARIA attributes correctness",
   "main": "index.js",
   "files": [
@@ -35,12 +35,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/SangWoo9734/eslint-plugin-aria-state-validator.git"
+    "url": "https://github.com/comento/eslint-plugin-aria-state-validator.git"
   },
   "bugs": {
-    "url": "https://github.com/SangWoo9734/eslint-plugin-aria-state-validator/issues"
+    "url": "https://github.com/comento/eslint-plugin-aria-state-validator/issues"
   },
-  "homepage": "https://github.com/SangWoo9734/eslint-plugin-aria-state-validator#readme",
+  "homepage": "https://github.com/comento/eslint-plugin-aria-state-validator#readme",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -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"
   }
 }