Merge pull request #26 from osdev-challenge/develop

release: AccessibilityFixer v2.0.0

Author: hong-seo

.docs/CONTRIBUTING.md

@@ -0,0 +1,60 @@
+# Contributing to AccessibilityFixer
+
+We welcome contributions from everyone in the community.
+
+Every contributor must adhere to our **Code of Conduct**.  
+Please read it carefully to understand what actions are acceptable.
+
+---
+
+## 1. Guiding Principles
+
+AccessibilityFixer is an open source project aiming to make web development more inclusive by providing accessibility checks and AI-powered suggestions.  
+We value **clarity**, **simplicity**, and **collaboration** over strict rules.
+
+### 1.1 Simplicity
+
+- Keep implementations simple and easy to understand.
+- Focus on the most common use cases first.
+- Avoid adding too many options unless truly necessary.
+
+### 1.2 Documentation
+
+- Document your changes clearly.
+- If you add or modify a command, update the README or relevant docs.
+- Screenshots or examples are welcome but optional.
+
+---
+
+## 2. Issues
+
+You can contribute by:
+
+- Reporting bugs
+- Suggesting new accessibility rules or improvements
+- Improving documentation or examples
+- Picking up existing issues from the tracker
+
+---
+
+## 3. Pull Requests
+
+### 3.1 Title Format
+
+Keep PR titles clear and concise. Examples:
+
+- `fix: label detection for input fields`
+- `feat: add AI-based suggestion for alt text`
+- `docs: update contributing guide`
+
+### 3.2 Checklist
+
+Before opening a PR, please check:
+
+- [ ] Code is easy to read and follows existing style
+- [ ] Changes are tested or manually verified
+- [ ] Documentation is updated if needed
+
+---
+
+Thank you for helping us improve AccessibilityFixer!

.docs/RULES.md

@@ -0,0 +1,65 @@
+# AccessibilityFixer Rules
+
+AccessibilityFixer detects and fixes accessibility issues in React/JSX/TSX code.  
+Some rules are resolved automatically with **AI suggestions**, while others are handled with **built-in logic**.
+
+---
+
+## Rules Resolved with AI
+
+These rules are automatically analyzed and fixed using AI-powered suggestions:
+
+| #   | Rule Name                                       | Description                                                            |
+| --- | ----------------------------------------------- | ---------------------------------------------------------------------- |
+| 1   | `alt-text`                                      | `<img>`, `<area>`, `<input type="image">` must have an `alt` attribute |
+| 2   | `anchor-has-content`                            | `<a>` elements must have content (avoid empty `<a></a>`)               |
+| 3   | `aria-props`                                    | Only valid ARIA properties should be used                              |
+| 4   | `aria-role`                                     | Only valid ARIA roles should be used                                   |
+| 5   | `control-has-associated-label`                  | Form control elements must have an associated label                    |
+| 6   | `img-redundant-alt`                             | Avoid redundant `alt` text like `alt="image"`                          |
+| 7   | `no-interactive-element-to-noninteractive-role` | Interactive elements must not be assigned non-interactive roles        |
+| 8   | `no-noninteractive-element-to-interactive-role` | Non-interactive elements must not be assigned interactive roles        |
+| 9   | `form-has-label`                                | All form controls inside a `<form>` must have labels                   |
+| 10  | `accessible-emoji`                              | Emojis must have `aria-label` or `role="img"`                          |
+| 11  | `aria-label-is-string`                          | `aria-label` must always be a string                                   |
+| 12  | `no-empty-alt`                                  | Empty `alt=""` is only allowed for decorative images                   |
+| 13  | `form-control-has-label`                        | All form controls must have visible or screen-reader accessible labels |
+
+---
+
+## Rules Resolved with Built-in Logic
+
+These rules are handled directly through static analysis and logic, without AI involvement:
+
+| #   | Rule Name                            | Description                                                                      |
+| --- | ------------------------------------ | -------------------------------------------------------------------------------- |
+| 1   | `anchor-is-valid`                    | `<a>` elements must have a valid `href` or proper role (e.g., `button`)          |
+| 2   | `aria-activedescendant-has-tabindex` | Elements using `aria-activedescendant` must have a `tabIndex`                    |
+| 3   | `aria-proptypes`                     | ARIA property values must have correct types                                     |
+| 4   | `aria-unsupported-elements`          | Do not use ARIA properties on unsupported elements like `<meta>` or `<script>`   |
+| 5   | `click-events-have-key-events`       | Clickable elements must also support keyboard events                             |
+| 6   | `heading-has-content`                | Heading tags (`<h1>` ~ `<h6>`) must not be empty                                 |
+| 7   | `html-has-lang`                      | `<html>` element must have a `lang` attribute                                    |
+| 8   | `interactive-supports-focus`         | Interactive roles (button, link) must support `tabIndex`                         |
+| 9   | `label-has-associated-control`       | `<label>` must be associated with a form control (`for` or nesting)              |
+| 10  | `mouse-events-have-key-events`       | Mouse events like `onMouseOver`/`onMouseOut` must have keyboard equivalents      |
+| 11  | `no-access-key`                      | Avoid using `accessKey` (can cause accessibility conflicts)                      |
+| 12  | `no-aria-hidden-on-focusable`        | Do not use `aria-hidden="true"` on focusable elements                            |
+| 13  | `no-distracting-elements`            | Avoid `<marquee>`, `<blink>`, etc.                                               |
+| 14  | `no-noninteractive-tabindex`         | Non-interactive elements must not use `tabIndex`                                 |
+| 15  | `no-static-element-interactions`     | Static elements with event handlers must have an appropriate role                |
+| 16  | `role-has-required-aria-props`       | Roles must include their required ARIA properties                                |
+| 17  | `role-supports-aria-props`           | Roles must only use supported ARIA properties                                    |
+| 18  | `tabindex-no-positive`               | Avoid positive `tabIndex` values (e.g., `tabIndex={1}`)                          |
+| 19  | `prefer-native-elements`             | Use native elements instead of ARIA roles (`<a>` instead of `role="link"`, etc.) |
+
+---
+
+## Notes
+
+- **AI-powered rules** provide more flexible and context-aware fixes.
+- **Logic-based rules** are handled deterministically by the extension.
+- The rule set is continuously expanding as AccessibilityFixer evolves.
+
+We welcome new rule proposals and improvements!
+Please check out our [CONTRIBUTING.md](.docs/RULES.md) for details on how to contribute.

.github/pull_request_template.md

@@ -1,13 +1,24 @@
-## 관련 이슈
-[//]: # (해결한 문제를 지정하는 Issue Index에 연결해야 합니다.)
+## 📌 Key Changes
 
-- Resolves : 
- 
-## 작업 사항
-[//]: # (해당 Pull Request에서 수행한 작업 목록을 제시해야 합니다.)
+<!-- Briefly describe the purpose of this PR and what problem it solves. -->
 
-- 
+---
 
-## 참고 사항
-[//]: # (기능을 만들 때 생긴 이슈에 대해서 다른사람들이 참고해야 할 사항을 적습니다.)
+## 🔗 Related Issues
 
+<!-- Link the issues this PR addresses (e.g., Closes #123). -->
+
+---
+
+## 🔍 Before & After(Optional)
+
+<!-- If applicable, attach screenshots, GIFs, or code snippets to show the changes. -->
+
+---
+
+## ✅ Checklist
+
+Please make sure the following are true before submitting your PR:
+
+- [ ] task 1
+- [ ] task 2

README.md

@@ -64,8 +64,14 @@ AccessibilityFixer works out of the box, even if you don’t have `eslint-plugin
 
 ## Contributing
 
-Contributions, suggestions, and issue reports are welcome!  
-Please visit our [GitHub Issues page](https://github.com/osdev-challenge/AccessibilityFixer) to submit feedback or bug reports.
+## Contributing
+
+We welcome contributions from everyone in the community.  
+Whether it’s fixing a bug, improving documentation, or suggesting a new feature — your help makes AccessibilityFixer better for everyone.
+
+For detailed contribution guidelines, please check our [CONTRIBUTING.md](.docs/CONTRIBUTING.md).
+
+📖 For a list of resolved accessibility rules, see [RULES.md](.docs/RULES.md).
 
 ---
 

package.json

@@ -2,7 +2,7 @@
   "name": "accessibilityfixer",
   "displayName": "AccessibilityFixer",
   "description": "Automatically detect and fix common accessibility issues in your React code, with AI-powered suggestions and quick fixes.",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "publisher": "uno-accessibilityfixer",
   "icon": "images/logo.png",
   "engines": {

src/ai/aiClient.ts

@@ -1,4 +1,3 @@
-// src/ai/aiClient.ts
 import axios from 'axios';
 import * as dotenv from 'dotenv';
 import * as path from 'path';
@@ -33,7 +32,7 @@ export async function callGpt(prompt: string): Promise<string> {
   return data.choices[0].message.content;
 }
 
-// // GPT API 요청 및 응답 처리
+// // 제미나이 API 요청 및 응답 처리
 
 // import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from '@google/generative-ai';
 // import dotenv from 'dotenv';

src/ai/context/extractElementA11yContext.ts

@@ -16,10 +16,9 @@ export interface ElementA11yContext {
   tabIndex?: number | null;
   disabled?: boolean;
   ariaDisabled?: boolean;
-  /** 보강: 추가 신호 (optional) */
   inputType?: string | null;
   contentEditable?: boolean | null;
-  mediaControls?: boolean | null; // audio/video controls
+  mediaControls?: boolean | null; 
   nativeInteractive: boolean;
 }
 
@@ -40,7 +39,6 @@ export function extractElementA11yContext(rc: RuleContext): ElementA11yContext {
   let disabled = false;
   let ariaDisabled = false;
 
-  // 보강: 추가 탐지용
   let inputType: string | null = null;
   let contentEditable: boolean | null = null;
   let mediaControls: boolean | null = null;
@@ -74,12 +72,10 @@ export function extractElementA11yContext(rc: RuleContext): ElementA11yContext {
           hasHandlers = true;
         }
 
-        // 보강: 요소별 추가 신호
         if (el === "input" && name === "type" && typeof value === "string") {
           inputType = value.toLowerCase();
         }
         if (name === "contentEditable") {
-          // true | "true" | ""(존재만) 처리
           contentEditable = value === true || value === "true" || value === "";
         }
         if ((el === "audio" || el === "video") && name === "controls") {
@@ -91,7 +87,6 @@ export function extractElementA11yContext(rc: RuleContext): ElementA11yContext {
     }
   });
 
-  // 네이티브 인터랙티브 추정
   const el = elementName.toLowerCase();
   const nativeInteractiveNames = new Set(["button", "input", "select", "textarea", "summary"]);
 

src/ai/context/extractLabelingContext.ts

@@ -1,7 +1,4 @@
-// src/ai/context/extractLabelingContext.ts
 import { RuleContext } from "../../rules/types";
-
-/** labeling-content 전 규칙에서 공용으로 사용하는 컨텍스트 */
 export type LabelingContext = {
   // 위치/범위
   filePath: string;
@@ -31,7 +28,7 @@ export type LabelingContext = {
   emojiSequence?: string[];
 };
 
-/** 유틸: JSX 태그 제거 + {…} 표현 최소 제거 후 평문만 남기기 */
+/** JSX 태그 제거 + {…} 표현 최소 제거 후 평문만 남기기 */
 function stripJsxToText(s: string): string {
   // 제거 순서: 주석 -> script/style -> 태그 -> JSX 표현 -> 공백 정리
   return s
@@ -45,13 +42,13 @@ function stripJsxToText(s: string): string {
     .trim();
 }
 
-/** 유틸: 간단한 JSX 시작 태그에서 태그명 추출 */
+/** 간단한 JSX 시작 태그에서 태그명 추출 */
 function detectTagName(snippet: string): string | undefined {
   const m = snippet.match(/<\s*([A-Za-z][\w:-]*)\b/);
   return m?.[1]?.toLowerCase();
 }
 
-/** 유틸: JSX 속성 파싱(문자열/JSX 표현/불리언 속성 대응, 단순 휴리스틱) */
+/** JSX 속성 파싱(문자열/JSX 표현/불리언 속성 대응, 단순 휴리스틱) */
 function parseAttributes(snippet: string): Record<string, string | true> {
   const attrs: Record<string, string | true> = {};
   const openTag = snippet.match(/<\s*[A-Za-z][\w:-]*\b([^>]*)>/);
@@ -86,7 +83,7 @@ function parseAttributes(snippet: string): Record<string, string | true> {
   return attrs;
 }
 
-/** 유틸: 시작/종료 태그 사이 텍스트(대략) */
+/** 시작/종료 태그 사이 텍스트(대략) */
 function extractInnerText(snippet: string): string | undefined {
   // 단일 태그(img,input 등)는 내부 텍스트 없음
   if (/\/\s*>$/.test(snippet)) return undefined;
@@ -100,7 +97,7 @@ function extractInnerText(snippet: string): string | undefined {
   return text || undefined;
 }
 
-/** 유틸: 파일 전체에서 id -> 텍스트/태그 매핑(얕은 휴리스틱) */
+/** 파일 전체에서 id -> 텍스트/태그 매핑(얕은 휴리스틱) */
 function buildIdMap(fileCode: string): Record<string, { text?: string; tag?: string }> {
   const map: Record<string, { text?: string; tag?: string }> = {};
   const tagRegex =
@@ -122,7 +119,7 @@ function buildIdMap(fileCode: string): Record<string, { text?: string; tag?: str
   return map;
 }
 
-/** 유틸: label htmlFor/for -> label 텍스트 배열 매핑 */
+/** label htmlFor/for -> label 텍스트 배열 매핑 */
 function buildLabelForMap(fileCode: string): Record<string, string[]> {
   const map: Record<string, string[]> = {};
   const labelRegex =
@@ -142,7 +139,7 @@ function buildLabelForMap(fileCode: string): Record<string, string[]> {
   return map;
 }
 
-/** 유틸: control 타입 추정 */
+/** control 타입 */
 function guessControlType(
   tag?: string,
   attrs?: Record<string, string | true>
@@ -162,7 +159,7 @@ function guessControlType(
   return "other";
 }
 
-/** 유틸: 간단한 role 계산 */
+/** 간단한 role 계산 */
 function computeRole(tag?: string, attrs?: Record<string, string | true>): string | undefined {
   const roleAttr = typeof attrs?.role === "string" ? String(attrs!.role) : undefined;
   if (roleAttr) return roleAttr;
@@ -179,7 +176,7 @@ function computeRole(tag?: string, attrs?: Record<string, string | true>): strin
   return undefined;
 }
 
-/** 유틸: 파일명 기반 텍스트 */
+/** 파일명 기반 텍스트 */
 function baseNameFromSrc(src?: string): string | undefined {
   if (!src || typeof src !== "string") return undefined;
   const m = src.match(/[^/\\]+$/);
@@ -188,7 +185,7 @@ function baseNameFromSrc(src?: string): string | undefined {
   return name.replace(/[_\-]+/g, " ").trim();
 }
 
-/** 유틸: 인근 figcaption 텍스트(±10줄) */
+/** 인근 figcaption 텍스트(±10줄) */
 function findNearbyFigcaption(lines: string[], lineNumber: number): string | undefined {
   const start = Math.max(0, lineNumber - 10);
   const end = Math.min(lines.length - 1, lineNumber + 10);
@@ -199,15 +196,15 @@ function findNearbyFigcaption(lines: string[], lineNumber: number): string | und
   return text || undefined;
 }
 
-/** 유틸: 주변에 form이 있는지(±20줄) */
+/** 주변에 form이 있는지(±20줄) */
 function isNearForm(lines: string[], lineNumber: number): boolean {
   const start = Math.max(0, lineNumber - 20);
   const end = Math.min(lines.length - 1, lineNumber + 20);
   const slice = lines.slice(start, end + 1).join("\n");
   return /<\s*form\b/i.test(slice);
 }
 
-/** 유틸: 이모지 시퀀스 추출(간단 범위 기반) */
+/** 이모지 시퀀스 추출(간단 범위 기반) */
 function extractEmojis(text?: string): string[] | undefined {
   if (!text) return undefined;
   // BMP 기반 + 일부 확장 — 실용적 커버리지
@@ -216,7 +213,7 @@ function extractEmojis(text?: string): string[] | undefined {
   return list.length ? list : undefined;
 }
 
-/** 유틸: aria-labelledby -> 연결 텍스트 생성 */
+/** aria-labelledby -> 연결 텍스트 생성 */
 function computeAssociatedLabelText(
   attrs: Record<string, string | true> | undefined,
   idMap: Record<string, { text?: string; tag?: string }> | undefined,
@@ -239,7 +236,7 @@ function computeAssociatedLabelText(
   return undefined;
 }
 
-/** 메인: RuleContext -> LabelingContext */
+/** RuleContext -> LabelingContext */
 export function extractLabelingContext(rc: RuleContext): LabelingContext {
   const { document, fileCode, code, lineNumber } = rc;
 

src/ai/pipelines/codeActions.ts

@@ -1,4 +1,3 @@
-// src/ai/pipelines/codeActions.ts
 import * as vscode from "vscode";
 import { RuleContext } from "../../rules/types";
 
@@ -24,7 +23,7 @@ export function createReplaceAction(
   return [action];
 }
 
-/* ===================== B안: 요소 전체 교체용 ===================== */
+/* ===================== 요소 전체 교체용 ===================== */
 
 /**
  * 요소 전체(elementRange)를 새 HTML로 한 번에 교체하는 QuickFix