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

package/README.ko.md

@@ -93,10 +93,12 @@ 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)를 사용하세요.
 
@@ -148,16 +150,25 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 </div>
 ```
 
+**자동 수정 지원 패턴:**
+- `() => setX(!x)`
+- `() => setX(true)`
+- `() => setX(prev => !prev)`
+
 ### 3. 역할 기반 상태 연관성 검증
 
-**감지 내용:** 정적 ARIA 상태를 가진 인터랙티브 역할
+**감지 내용:** 인터랙티브 역할(Role)에 정적인 ARIA 상태를 사용하거나 필수 속성이 누락된 경우.
 
 ```jsx
 // ❌ 오류: role="button"인데 aria-pressed가 정적
 <div role="button" aria-pressed="false">버튼</div>
 
+// ❌ 오류: role="switch"에 필수 속성 aria-checked 누락
+<div role="switch">토글</div>
+
 // ✅ 올바름: 동적 상태 바인딩
 <div role="button" aria-pressed={isPressed ? 'true' : 'false'}>버튼</div>
+<div role="switch" aria-checked={isChecked ? 'true' : 'false'}>토글</div>
 ```
 
 ---
@@ -193,7 +204,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 **감지 내용:** 잘못된 boolean 형식 값
 
 ```jsx
-// ❌ 오류: 유효하지 않은 boolean 값
+// ❌ 오류: 유효하지 않은 boolean 값 ("yes"/"no"는 자동 수정 지원)
 <div aria-hidden="yes">내용</div>
 <div aria-disabled="1">내용</div>
 
@@ -252,12 +263,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 +279,7 @@ ARIA **상태** 속성이 컴포넌트 상태와 올바르게 연결되어 동
 
 - `button`, `tab`, `checkbox`, `radio`, `switch`
 - `menuitem`, `menuitemcheckbox`, `menuitemradio`
-- `option`, `treeitem`
+- `option`, `treeitem`, `slider`, `progressbar`
 - `dialog`, `alertdialog`
 
 ## 예제

package/README.md

@@ -73,10 +73,12 @@ Validates that ARIA **state** attributes are properly bound to component state a
 ### 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).
 
@@ -126,16 +128,25 @@ Validates the **correctness** of ARIA attributes when they are used:
 </div>
 ```
 
+**Supported Patterns for Auto-fix:**
+- `() => 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: role="switch" missing aria-checked
+<div role="switch">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 +161,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 +182,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 +241,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 +257,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

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,13 @@ const INTERACTIVE_ROLES = [
   "treeitem",
   "dialog",
   "alertdialog",
+  "slider",
+  "progressbar",
+  "scrollbar",
+  "spinbutton",
+  "tree",
+  "grid",
+  "listbox",
 ];
 
 module.exports = {
@@ -224,51 +255,73 @@ 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) {
@@ -313,7 +366,9 @@ module.exports = {
 
           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,

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

@@ -76,6 +76,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",
+};
+
+// Roles and their required/allowed attributes
+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"]);
 
@@ -130,7 +180,7 @@ module.exports = {
       recommended: true,
       url: "https://github.com/your-repo/eslint-plugin-aria-state-validator",
     },
-    fixable: null,
+    fixable: "code",
     schema: [],
     messages: {
       invalidAriaProp:
@@ -145,10 +195,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 +227,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;
@@ -242,10 +299,36 @@ module.exports = {
     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);
+
+        // Required ARIA attributes for role
+        if (roleValue && ROLE_DEFINITIONS[roleValue]) {
+          const required = ROLE_DEFINITIONS[roleValue].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 +347,9 @@ module.exports = {
           context.report({
             node: ariaLabelAttr,
             messageId: "ariaLabelWithLabelledBy",
+            fix(fixer) {
+              return fixer.remove(ariaLabelAttr);
+            }
           });
         }
 
@@ -273,6 +359,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 +388,24 @@ 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 },
+                  });
+               }
+            }
+          }
+
           const value = getAttributeValue(attr);
 
           // Can't validate dynamic values
@@ -331,6 +451,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.0",
+  "version": "1.1.0",
   "description": "Comprehensive ESLint plugin for ARIA accessibility validation: dynamic state binding and static ARIA attributes correctness",
   "main": "index.js",
   "files": [