gbu-accessibility-package 1.0.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 GBU Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/QUICK_START.md

@@ -1,19 +1,18 @@
 # 🚀 Quick Start Guide
 
-Hướng dẫn nhanh để sử dụng Accessibility Fixer trong 5 phút.
+Hướng dẫn nhanh để sử dụng GBU Accessibility Package trong 5 phút.
 
 ## ⚡ Cài đặt nhanh
 
 ```bash
-# 1. Copy package vào dự án
-cp -r accessibility-package /path/to/your/project/
+# 1. Cài đặt global (khuyến nghị)
+npm install -g gbu-accessibility-package
 
-# 2. Cài đặt dependencies
-cd your-project/accessibility-package
-npm install
+# 2. Hoặc cài đặt local
+npm install gbu-accessibility-package
 
 # 3. Chạy ngay!
-node cli.js
+gbu-a11y
 ```
 
 ## 🎯 Sử dụng cơ bản
@@ -22,16 +21,19 @@ node cli.js
 
 ```bash
 # Fix toàn bộ dự án (current directory)
-node accessibility-package/cli.js
+gbu-a11y
 
 # Fix thư mục cụ thể
-node accessibility-package/cli.js ./src
+gbu-a11y ./src
 
 # Preview trước khi fix
-node accessibility-package/cli.js --dry-run
+gbu-a11y --dry-run
 
 # Fix với ngôn ngữ khác
-node accessibility-package/cli.js -l en ./dist
+gbu-a11y -l en ./dist
+
+# Fix comprehensive (khuyến nghị)
+gbu-a11y --comprehensive
 ```
 
 ### Cách 2: Node.js Script
@@ -39,7 +41,7 @@ node accessibility-package/cli.js -l en ./dist
 Tạo file `fix.js`:
 
 ```javascript
-const AccessibilityFixer = require('./accessibility-package/lib/fixer.js');
+const AccessibilityFixer = require('gbu-accessibility-package');
 
 const fixer = new AccessibilityFixer({
   language: 'ja',     // Thay đổi theo dự án
@@ -48,9 +50,8 @@ const fixer = new AccessibilityFixer({
 });
 
 async function fix() {
-  await fixer.fixHtmlLang('.');
-  await fixer.fixEmptyAltAttributes('.');
-  await fixer.fixRoleAttributes('.');
+  // Fix tất cả issues
+  await fixer.fixAllAccessibilityIssues('.');
   console.log('✅ Done!');
 }
 
@@ -61,11 +62,10 @@ Chạy: `node fix.js`
 
 ## 📋 Checklist nhanh
 
-- [ ] Copy package vào dự án
-- [ ] `npm install` trong thư mục package
+- [ ] `npm install -g gbu-accessibility-package`
 - [ ] Backup code (git commit)
-- [ ] Chạy `--dry-run` để preview
-- [ ] Chạy tool để fix
+- [ ] Chạy `gbu-a11y --dry-run` để preview
+- [ ] Chạy `gbu-a11y --comprehensive` để fix
 - [ ] Kiểm tra kết quả
 - [ ] Commit changes
 
@@ -103,19 +103,19 @@ language: 'en'  // 'ja', 'vi', 'zh', etc.
 
 ### Không tạo backup
 ```bash
-node cli.js --no-backup
+gbu-a11y --no-backup
 ```
 
 ### Chỉ preview
 ```bash
-node cli.js --dry-run
+gbu-a11y --dry-run
 ```
 
 ## ❓ Troubleshooting
 
 **Lỗi "Cannot find module"**
 ```bash
-cd accessibility-package && npm install
+npm install -g gbu-accessibility-package
 ```
 
 **Duplicate attributes**
@@ -130,7 +130,7 @@ cd accessibility-package && npm install
 
 1. Đọc [README.md](./README.md) đầy đủ
 2. Xem [example.js](./example.js) 
-3. Chạy `node cli.js --help`
+3. Chạy `gbu-a11y --help`
 
 ---
 

package/README.md

@@ -1,305 +1,292 @@
 # GBU Accessibility Package
 
-[![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://badge.fury.io/js/gbu-accessibility-package)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+🚀 **Automated accessibility fixes for HTML files** - Smart, context-aware accessibility improvements with zero configuration.
 
-Một công cụ tự động sửa các vấn đề accessibility phổ biến trong HTML, bao gồm alt attributes, lang attributes, và role attributes với khả năng phân tích context thông minh.
+[![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://www.npmjs.com/package/gbu-accessibility-package)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Node.js Version](https://img.shields.io/badge/node-%3E%3D12.0.0-brightgreen)](https://nodejs.org/)
 
-## 🚀 Tính năng
+## ✨ Features
 
-- ✅ **Alt Attributes**: Tự động thêm alt text thông minh cho images
-- ✅ **Lang Attributes**: Thêm lang attribute cho thẻ `<html>`
-- ✅ **Role Attributes**: Thêm role attributes cho các elements
-  - `role="img"` cho tất cả thẻ `<img>`
-  - `role="link"` cho thẻ `<a>`
-  - `role="button"` cho elements có onclick
-  - `role="menubar"` và `role="menuitem"` cho navigation lists
-- ✅ **Context-aware**: Phân tích nội dung xung quanh để tạo alt text phù hợp
-- ✅ **Backup tự động**: Tạo backup files trước khi sửa
-- ✅ **Dry run mode**: Xem preview trước khi apply changes
+- 🖼️ **Smart Alt Text Generation** - Context-aware alt attributes for images
+- 🌐 **HTML Lang Attributes** - Automatic language attribute fixes
+- 🎭 **Role Attributes** - WCAG-compliant role attribute management
+- 🧹 **Duplicate Cleanup** - Remove duplicate role attributes
+- 📁 **Batch Processing** - Process entire directories recursively
+- 💾 **Automatic Backups** - Safe modifications with backup files
+- 🔍 **Dry Run Mode** - Preview changes before applying
+- 📊 **Detailed Reports** - Comprehensive fix summaries
 
-## 📦 Cài đặt
+## 🚀 Quick Start
 
-### NPM Install (Khuyến nghị)
+### Installation
 
 ```bash
-# Cài đặt global
+# Global installation (recommended)
 npm install -g gbu-accessibility-package
 
-# Hoặc cài đặt local cho dự án
-npm install gbu-accessibility-package --save-dev
+# Local installation
+npm install gbu-accessibility-package
 ```
 
-### Yarn Install
+### Basic Usage
 
 ```bash
-# Global
-yarn global add gbu-accessibility-package
+# Fix current directory
+gbu-a11y
 
-# Local
-yarn add gbu-accessibility-package --dev
-```
+# Preview changes (dry run)
+gbu-a11y --dry-run
 
-## 🛠️ Sử dụng
+# Fix specific directory
+gbu-a11y ./src
 
-### Cách 1: Sử dụng CLI (Global Install)
-
-```bash
-# Sau khi cài đặt global
-gbu-a11y [options] [directory]
+# Comprehensive fixes (recommended)
+gbu-a11y --comprehensive
 
-# Hoặc
-accessibility-fixer [options] [directory]
+# Fix specific file
+gbu-a11y index.html
 ```
 
-### Cách 1b: CLI (Local Install)
+## 📖 Detailed Usage
 
-```bash
-# Chạy từ node_modules
-npx gbu-a11y [options] [directory]
+### Command Line Options
 
-# Hoặc thêm vào package.json scripts
-{
-  "scripts": {
-    "fix-a11y": "gbu-a11y",
-    "preview-a11y": "gbu-a11y --dry-run"
-  }
-}
+```bash
+gbu-a11y [options] [directory/file]
+
+Options:
+  -d, --directory <path>    Target directory (default: current directory)
+  -l, --language <lang>     Language for lang attribute (default: ja)
+  --no-backup              Don't create backup files
+  --dry-run                Preview changes without applying
+  --cleanup-only           Only cleanup duplicate role attributes
+  --comprehensive, --all   Run all fixes including cleanup (recommended)
+  -h, --help               Show help message
 ```
 
-### Cách 2: Sử dụng trong Node.js
+### Examples
 
-```javascript
-const AccessibilityFixer = require('gbu-accessibility-package');
+```bash
+# Basic fixes for current directory
+gbu-a11y
 
-// Tạo instance với config
-const fixer = new AccessibilityFixer({
-  language: 'ja',        // Ngôn ngữ cho lang attribute
-  backupFiles: true,     // Tạo backup files
-  dryRun: false         // false = apply changes, true = preview only
-});
+# Preview all changes
+gbu-a11y --dry-run --comprehensive
 
-// Sử dụng các methods
-async function fixAccessibility() {
-  // Fix lang attributes
-  const langResults = await fixer.fixHtmlLang('.');
-  
-  // Fix alt attributes
-  const altResults = await fixer.fixEmptyAltAttributes('.');
-  
-  // Fix role attributes
-  const roleResults = await fixer.fixRoleAttributes('.');
-  
-  console.log('Hoàn thành!');
-}
+# Fix with English language
+gbu-a11y -l en ./public
 
-fixAccessibility();
-```
+# Only cleanup duplicates
+gbu-a11y --cleanup-only
 
-### Cách 3: Script nhanh
+# Fix without creating backups
+gbu-a11y --no-backup ./dist
+```
 
-Tạo file `fix-accessibility.js` trong dự án:
+## 🔧 Programmatic Usage
 
 ```javascript
 const AccessibilityFixer = require('gbu-accessibility-package');
 
 const fixer = new AccessibilityFixer({
-  language: 'ja',        // Thay đổi theo ngôn ngữ dự án
+  language: 'en',
   backupFiles: true,
   dryRun: false
 });
 
-async function fixAll() {
-  console.log('🚀 Bắt đầu fix accessibility...');
-  
-  // Fix tất cả issues
-  await fixer.fixHtmlLang('.');
-  await fixer.fixEmptyAltAttributes('.');
-  await fixer.fixRoleAttributes('.');
-  
-  console.log('✅ Hoàn thành!');
+// Fix all accessibility issues
+async function fixAccessibility() {
+  try {
+    const results = await fixer.fixAllAccessibilityIssues('./src');
+    console.log('Fixed files:', results);
+  } catch (error) {
+    console.error('Error:', error);
+  }
 }
 
-fixAll();
+fixAccessibility();
 ```
 
-Chạy script:
-```bash
-node fix-accessibility.js
-```
+## 🎯 What Gets Fixed
 
-## ⚙️ Configuration Options
+### 1. Alt Attributes
+- **Missing alt attributes** → Adds contextual alt text
+- **Empty alt attributes** → Generates meaningful descriptions
+- **Context-aware generation** → Uses surrounding text, headings, captions
 
-```javascript
-const config = {
-  language: 'ja',           // Lang attribute value ('ja', 'en', 'vi', etc.)
-  backupFiles: true,        // Tạo .backup files
-  dryRun: false            // true = chỉ preview, false = apply changes
-};
+```html
+<!-- Before -->
+<img src="logo.png">
+<img src="chart.jpg" alt="">
 
-const fixer = new AccessibilityFixer(config);
+<!-- After -->
+<img src="logo.png" alt="ロゴ">
+<img src="chart.jpg" alt="グラフ">
 ```
 
-## 📋 Các Methods có sẵn
+### 2. HTML Lang Attributes
+- **Missing lang attributes** → Adds specified language
+- **Empty lang attributes** → Sets proper language code
 
-### 1. fixHtmlLang(directory)
-Thêm lang attribute cho thẻ `<html>`
+```html
+<!-- Before -->
+<html>
+<html lang="">
 
-```javascript
-const results = await fixer.fixHtmlLang('./src');
+<!-- After -->
+<html lang="ja">
+<html lang="ja">
 ```
 
-### 2. fixEmptyAltAttributes(directory)
-Sửa missing/empty alt attributes cho images
+### 3. Role Attributes
+- **Images** → `role="img"`
+- **Links** → `role="link"`
+- **Clickable elements** → `role="button"`
+- **Navigation lists** → `role="menubar"`
+- **Menu items** → `role="menuitem"`
 
-```javascript
-const results = await fixer.fixEmptyAltAttributes('./src');
+```html
+<!-- Before -->
+<img src="icon.png" alt="Icon">
+<a href="/home">Home</a>
+<div class="btn-click">Click me</div>
+
+<!-- After -->
+<img src="icon.png" alt="Icon" role="img">
+<a href="/home" role="link">Home</a>
+<div class="btn-click" role="button">Click me</div>
 ```
 
-### 3. fixRoleAttributes(directory)
-Thêm role attributes cho các elements
+### 4. Duplicate Cleanup
+- **Removes duplicate role attributes**
+- **Preserves first occurrence**
+- **Handles mixed quote styles**
 
-```javascript
-const results = await fixer.fixRoleAttributes('./src');
-```
-
-### 4. addMainLandmarks(directory)
-Phát hiện và suggest main landmarks
+```html
+<!-- Before -->
+<img src="test.jpg" role="img" role="img" alt="Test">
 
-```javascript
-const suggestions = await fixer.addMainLandmarks('./src');
+<!-- After -->
+<img src="test.jpg" role="img" alt="Test">
 ```
 
-## 🎯 Ví dụ kết quả
+## 🌟 Smart Alt Text Generation
 
-### Alt Attributes
-```html
-<!-- Trước -->
-<img src="logo.png">
-<img src="icon.png" alt="">
+The package uses intelligent context analysis to generate meaningful alt text:
 
-<!-- Sau -->
-<img src="logo.png" alt="ロゴ">
-<img src="icon.png" alt="アイコン">
-```
+### Context Sources
+1. **Title attributes**
+2. **Aria-label attributes**  
+3. **Definition terms (dt elements)**
+4. **Parent link text**
+5. **Nearby headings**
+6. **Figure captions**
+7. **Surrounding text content**
 
-### Role Attributes
-```html
-<!-- Trước -->
-<img src="photo.jpg" alt="Beautiful sunset">
-<a href="/about">About Us</a>
-<button onclick="submit()">Submit</button>
-
-<!-- Sau -->
-<img src="photo.jpg" alt="Beautiful sunset" role="img">
-<a href="/about" role="link">About Us</a>
-<button onclick="submit()" role="button">Submit</button>
-```
+### Fallback Patterns
+- `logo.png` → "ロゴ" (Logo)
+- `icon.svg` → "アイコン" (Icon)
+- `banner.jpg` → "バナー" (Banner)
+- `chart.png` → "グラフ" (Chart)
+- Generic images → "画像" (Image)
 
-### Lang Attributes
-```html
-<!-- Trước -->
-<html>
+## 📊 Output Examples
 
-<!-- Sau -->
-<html lang="ja">
+### Standard Mode
 ```
+🚀 Starting Accessibility Fixer...
+📝 Step 1: Fixing HTML lang attributes...
+✅ Fixed lang attributes in 5 files
 
-## 🔧 Customization
+🖼️ Step 2: Fixing alt attributes...
+✅ Fixed alt attributes in 12 files (34 issues)
 
-### Thay đổi ngôn ngữ cho alt text
+🎭 Step 3: Fixing role attributes...  
+✅ Fixed role attributes in 8 files (67 issues)
 
-Sửa method `generateAltText` trong `lib/fixer.js`:
+📊 Summary:
+   Total files scanned: 25
+   Files fixed: 15
+   Total issues resolved: 106
 
-```javascript
-generateAltText(imgTag, htmlContent = '', imgIndex = 0) {
-  // Thay đổi các text này theo ngôn ngữ dự án
-  if (srcValue.includes('logo')) {
-    return 'Logo';           // Thay vì 'ロゴ'
-  } else if (srcValue.includes('icon')) {
-    return 'Icon';           // Thay vì 'アイコン'
-  }
-  // ... thêm các cases khác
-}
+🎉 All accessibility fixes completed successfully!
 ```
 
-### Thêm role rules mới
-
-Sửa method `fixRoleAttributesInContent` để thêm rules:
-
-```javascript
-// Ví dụ: thêm role cho form elements
-fixed = fixed.replace(
-  /<form([^>]*)(?!.*role\s*=)([^>]*>)/gi,
-  '<form$1 role="form"$2'
-);
+### Comprehensive Mode
+```
+🎯 Running comprehensive accessibility fixes...
+📝 Step 1: HTML lang attributes...
+🖼️ Step 2: Alt attributes...
+🎭 Step 3: Role attributes...
+🧹 Step 4: Cleanup duplicate roles...
+
+🎉 All accessibility fixes completed!
+📊 Final Summary:
+   Total files scanned: 25
+   Files fixed: 15  
+   Total issues resolved: 106
 ```
 
-## 🚨 Lưu ý quan trọng
-
-1. **Backup**: Luôn tạo backup trước khi chạy tool
-2. **Test**: Chạy với `dryRun: true` trước để xem preview
-3. **Review**: Kiểm tra kết quả sau khi chạy
-4. **Git**: Commit code trước khi chạy tool
+## 🔒 Safety Features
 
-## 📊 Monitoring Results
+- **Automatic backups** with `.backup` extension
+- **Dry run mode** for safe previewing
+- **Non-destructive** - only adds missing attributes
+- **Duplicate prevention** - won't add existing attributes
+- **Error handling** - continues processing on individual file errors
 
-Tool sẽ hiển thị:
-- Số files được xử lý
-- Số issues được tìm thấy và sửa
-- Chi tiết từng file
-- Thống kê tổng quan
+## 🛠️ Configuration
 
-```
-📁 index.html:
-  🖼️ Missing role: Image 1 should have role="img"
-  🔗 Missing role: Anchor 1 should have role="link"
-  🖼️ Added role="img" to image element
-  🔗 Added role="link" to anchor element
-✅ Fixed role attributes in: index.html
-
-📊 Summary: Found 245 role attribute issues across 50 files
+### Package.json Scripts
+```json
+{
+  "scripts": {
+    "a11y:fix": "gbu-a11y",
+    "a11y:check": "gbu-a11y --dry-run",
+    "a11y:comprehensive": "gbu-a11y --comprehensive",
+    "a11y:cleanup": "gbu-a11y --cleanup-only"
+  }
+}
 ```
 
-## 🛠️ Troubleshooting
+### CI/CD Integration
+```yaml
+# GitHub Actions example
+- name: Check Accessibility
+  run: npx gbu-accessibility-package --dry-run
 
-### Lỗi "Cannot find module"
-```bash
-cd accessibility-package
-npm install
+- name: Fix Accessibility Issues  
+  run: npx gbu-accessibility-package --comprehensive
 ```
 
-### Duplicate role attributes
-Chạy cleanup script:
-```javascript
-// Tạo file cleanup.js
-const fs = require('fs');
-const path = require('path');
-
-async function cleanup() {
-  // Code cleanup duplicate roles
-  const content = await fs.promises.readFile('file.html', 'utf8');
-  const fixed = content.replace(/role="([^"]+)"(\s+role="\1")+/g, 'role="$1"');
-  await fs.promises.writeFile('file.html', fixed);
-}
-```
+## 🤝 Contributing
 
-### Performance với project lớn
-- Chạy từng thư mục con
-- Sử dụng `dryRun: true` để test trước
-- Exclude thư mục không cần thiết
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
 
 ## 📝 License
 
-MIT License - Tự do sử dụng cho mọi dự án.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 🤝 Contributing
+## 🆘 Support
+
+- 📧 **Issues**: [GitHub Issues](https://github.com/your-org/gbu-accessibility-package/issues)
+- 📖 **Documentation**: [GitHub Wiki](https://github.com/your-org/gbu-accessibility-package/wiki)
+- 💬 **Discussions**: [GitHub Discussions](https://github.com/your-org/gbu-accessibility-package/discussions)
+
+## 🏆 Why Choose GBU Accessibility Package?
 
-1. Fork repository
-2. Tạo feature branch
-3. Commit changes
-4. Tạo Pull Request
+- ✅ **Zero Configuration** - Works out of the box
+- ✅ **Smart & Context-Aware** - Not just generic fixes
+- ✅ **Safe & Reliable** - Automatic backups and dry run
+- ✅ **Comprehensive** - Covers all major accessibility issues
+- ✅ **Fast & Efficient** - Batch processing with detailed reports
+- ✅ **WCAG Compliant** - Follows accessibility standards
 
 ---
 
-**Happy coding! 🚀**
+Made with ❤️ by the GBU Team

package/cli.js

@@ -16,7 +16,9 @@ const options = {
   language: 'ja',
   backupFiles: true,
   dryRun: false,
-  help: false
+  help: false,
+  cleanupOnly: false,
+  comprehensive: false
 };
 
 // Parse arguments
@@ -42,6 +44,13 @@ for (let i = 0; i < args.length; i++) {
     case '--dry-run':
       options.dryRun = true;
       break;
+    case '--cleanup-only':
+      options.cleanupOnly = true;
+      break;
+    case '--comprehensive':
+    case '--all':
+      options.comprehensive = true;
+      break;
     default:
       if (!arg.startsWith('-')) {
         options.directory = arg;
@@ -61,10 +70,14 @@ Options:
   -l, --language <lang>     Language for lang attribute (default: ja)
   --no-backup              Don't create backup files
   --dry-run                Preview changes without applying
+  --cleanup-only           Only cleanup duplicate role attributes
+  --comprehensive, --all   Run all fixes including cleanup (recommended)
   -h, --help               Show this help message
 
 Examples:
-  node cli.js                          # Fix current directory
+  node cli.js                          # Fix current directory (standard fixes)
+  node cli.js --comprehensive          # Run all fixes including cleanup
+  node cli.js --cleanup-only           # Only cleanup duplicate roles
   node cli.js ./src                    # Fix src directory
   node cli.js -l en --dry-run ./dist   # Preview fixes for dist directory in English
   node cli.js --no-backup ./public    # Fix without creating backups
@@ -95,6 +108,32 @@ async function main() {
   });
 
   try {
+    // Handle different modes
+    if (options.comprehensive) {
+      // Run comprehensive fix (all fixes including cleanup)
+      console.log(chalk.blue('🎯 Running comprehensive accessibility fixes...'));
+      const results = await fixer.fixAllAccessibilityIssues(options.directory);
+      
+      // Results already logged in the method
+      return;
+      
+    } else if (options.cleanupOnly) {
+      // Only cleanup duplicate roles
+      console.log(chalk.blue('🧹 Running cleanup for duplicate role attributes...'));
+      const cleanupResults = await fixer.cleanupDuplicateRoles(options.directory);
+      const cleanupFixed = cleanupResults.filter(r => r.status === 'fixed').length;
+      
+      console.log(chalk.green(`\n✅ Cleaned duplicate roles in ${cleanupFixed} files`));
+      
+      if (options.dryRun) {
+        console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+      } else {
+        console.log(chalk.green('\n🎉 Cleanup completed successfully!'));
+      }
+      return;
+    }
+
+    // Standard mode - run individual fixes
     // Fix HTML lang attributes
     console.log(chalk.yellow('📝 Step 1: Fixing HTML lang attributes...'));
     const langResults = await fixer.fixHtmlLang(options.directory);
@@ -146,6 +185,9 @@ async function main() {
         console.log(chalk.gray('   Backup files created with .backup extension'));
       }
     }
+    
+    // Suggest cleanup if not comprehensive mode
+    console.log(chalk.blue('\n💡 Pro tip: Use --comprehensive to include duplicate role cleanup!'));
 
   } catch (error) {
     console.error(chalk.red('❌ Error occurred:'), error.message);

package/demo/duplicate-roles.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <title>Test Duplicate Roles</title>
+</head>
+<body>
+    <h1>Test Duplicate Role Attributes</h1>
+    
+    <!-- Images with duplicate roles -->
+    <img src="logo.png" alt="Logo" role="img" role="img" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img" role="img" role="img" role="img">
+    
+    <!-- Links with duplicate roles -->
+    <a href="/home" role="link" role="link" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link" role="link" role="link" role="link">About</a>
+    
+    <!-- Buttons with duplicate roles -->
+    <button onclick="submit()" role="button" role="button" role="button" role="button" role="button">Submit</button>
+    <button type="button" role="button" role="button" role="button">Click Me</button>
+    
+    <!-- Mixed quotes -->
+    <div onclick="toggle()" role="button" role='button' role="button" role="button" role="button">Toggle</div>
+    <span onclick="show()" role='button' role="button" role="button" role="button" role="button">Show</span>
+    
+    <!-- Navigation with duplicates -->
+    <nav>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/products" role="link" role="link" role="link" role="link" role="link">Products</a>
+            </li>
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/services" role="link" role="link" role="link" role="link" role="link" role="link">Services</a>
+            </li>
+        </ul>
+    </nav>
+    
+    <!-- Complex duplicates -->
+    <article>
+        <h2>Article with Issues</h2>
+        <img src="article1.jpg" alt="Article Image" role="img" role="img" role="img" role="img" role="img">
+        <p>Some content...</p>
+        <a href="/read-more" role="link" role="link" role="link" role="link" role="link" role="link" role="link">Read More</a>
+    </article>
+</body>
+</html>

package/demo/duplicate-roles.html.backup

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <title>Test Duplicate Roles</title>
+</head>
+<body>
+    <h1>Test Duplicate Role Attributes</h1>
+    
+    <!-- Images with duplicate roles -->
+    <img src="logo.png" alt="Logo" role="img" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img" role="img" role="img">
+    
+    <!-- Links with duplicate roles -->
+    <a href="/home" role="link" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link" role="link" role="link">About</a>
+    
+    <!-- Buttons with duplicate roles -->
+    <button onclick="submit()" role="button" role="button" role="button" role="button">Submit</button>
+    <button type="button" role="button" role="button" role="button">Click Me</button>
+    
+    <!-- Mixed quotes -->
+    <div onclick="toggle()" role="button" role='button' role="button" role="button">Toggle</div>
+    <span onclick="show()" role='button' role="button" role="button" role="button">Show</span>
+    
+    <!-- Navigation with duplicates -->
+    <nav>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/products" role="link" role="link" role="link" role="link">Products</a>
+            </li>
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/services" role="link" role="link" role="link" role="link" role="link">Services</a>
+            </li>
+        </ul>
+    </nav>
+    
+    <!-- Complex duplicates -->
+    <article>
+        <h2>Article with Issues</h2>
+        <img src="article1.jpg" alt="Article Image" role="img" role="img" role="img" role="img">
+        <p>Some content...</p>
+        <a href="/read-more" role="link" role="link" role="link" role="link" role="link" role="link">Read More</a>
+    </article>
+</body>
+</html>

package/demo/sample.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Demo HTML for Accessibility Testing</title>
 </head>
@@ -7,27 +7,27 @@
     <h1>Sample Website</h1>
     
     <!-- Images without alt or role -->
-    <img src="logo.png">
-    <img src="banner.jpg" alt="">
-    <img src="icon.svg" alt="Home Icon">
+    <img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
+    <img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
     
     <!-- Links without role -->
-    <a href="/home">Home</a>
-    <a href="/about">About Us</a>
+    <a href="/home" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link">About Us</a>
     
     <!-- Buttons without role -->
-    <button onclick="submit()">Submit Form</button>
+    <button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
     <button type="button">Regular Button</button>
     
     <!-- Clickable elements -->
-    <div onclick="navigate()" class="btn">Click Me</div>
-    <span onclick="toggle()">Toggle</span>
+    <div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
+    <span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
     
     <!-- Navigation -->
     <nav>
-        <ul class="nav-menu">
-            <li class="nav-item"><a href="/products">Products</a></li>
-            <li class="nav-item"><a href="/services">Services</a></li>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem"><a href="/products" role="link" role="link" role="link">Products</a></li>
+            <li class="nav-item" role="menuitem"><a href="/services" role="link" role="link" role="link">Services</a></li>
         </ul>
     </nav>
     
@@ -36,7 +36,7 @@
         <article>
             <h2>Article Title</h2>
             <p>Some content here...</p>
-            <img src="article-image.jpg" alt="">
+            <img src="article-image.jpg" alt="Article Title" role="img" role="img" role="img">
         </article>
     </main>
     

package/demo/sample.html.backup

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Demo HTML for Accessibility Testing</title>
 </head>
@@ -7,27 +7,27 @@
     <h1>Sample Website</h1>
     
     <!-- Images without alt or role -->
-    <img src="logo.png">
-    <img src="banner.jpg" alt="">
-    <img src="icon.svg" alt="Home Icon">
+    <img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
+    <img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
+    <img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
     
     <!-- Links without role -->
-    <a href="/home">Home</a>
-    <a href="/about">About Us</a>
+    <a href="/home" role="link" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link">About Us</a>
     
     <!-- Buttons without role -->
-    <button onclick="submit()">Submit Form</button>
+    <button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
     <button type="button">Regular Button</button>
     
     <!-- Clickable elements -->
-    <div onclick="navigate()" class="btn">Click Me</div>
-    <span onclick="toggle()">Toggle</span>
+    <div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
+    <span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
     
     <!-- Navigation -->
     <nav>
-        <ul class="nav-menu">
-            <li class="nav-item"><a href="/products">Products</a></li>
-            <li class="nav-item"><a href="/services">Services</a></li>
+        <ul class="nav-menu" role="menubar" role="menubar" role="menubar">
+            <li class="nav-item"><a href="/products" role="link" role="link" role="link">Products</a></li>
+            <li class="nav-item"><a href="/services" role="link" role="link" role="link">Services</a></li>
         </ul>
     </nav>
     
@@ -36,7 +36,7 @@
         <article>
             <h2>Article Title</h2>
             <p>Some content here...</p>
-            <img src="article-image.jpg" alt="">
+            <img src="article-image.jpg" alt="Article Title" role="img" role="img" role="img">
         </article>
     </main>
     

package/lib/fixer.js

@@ -645,73 +645,105 @@ class AccessibilityFixer {
     
     // Fix all images - add role="img" (only if no role exists)
     fixed = fixed.replace(
-      /<img([^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<img([^>]*>)/gi,
+      (match, fullTag) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🖼️ Added role="img" to image element`));
-        return `<img${attrs} role="img"${end}`;
+        return match.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
       }
     );
     
     // Fix button elements with onclick - add role="button"
     fixed = fixed.replace(
-      /<button([^>]*onclick[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<button([^>]*onclick[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔘 Added role="button" to button with onclick`));
-        return `<button${attrs} role="button"${end}`;
+        return match.replace(/(<button[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix anchor elements - add role="link"
     fixed = fixed.replace(
-      /<a([^>]*href[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<a([^>]*href[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔗 Added role="link" to anchor element`));
-        return `<a${attrs} role="link"${end}`;
+        return match.replace(/(<a[^>]*?)(\s*>)/i, '$1 role="link"$2');
       }
     );
     
     // Fix any element with onclick (except a and button) - add role="button"
     fixed = fixed.replace(
-      /<((?!a|button)[a-zA-Z][a-zA-Z0-9]*)([^>]*onclick[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, tag, attrs, end) => {
+      /<((?!a|button)[a-zA-Z][a-zA-Z0-9]*)([^>]*onclick[^>]*>)/gi,
+      (match, tag) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔘 Added role="button" to ${tag} with onclick`));
-        return `<${tag}${attrs} role="button"${end}`;
+        return match.replace(/(<[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix clickable divs - add role="button"
     fixed = fixed.replace(
-      /<div([^>]*class="[^"]*(?:btn|button|click)[^"]*"[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<div([^>]*class="[^"]*(?:btn|button|click)[^"]*"[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  🔘 Added role="button" to clickable div`));
-        return `<div${attrs} role="button"${end}`;
+        return match.replace(/(<div[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix focusable elements with tabindex
     fixed = fixed.replace(
-      /<(div|span)([^>]*tabindex\s*=\s*[""']?[0-9-]+[""']?[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, tag, attrs, end) => {
+      /<(div|span)([^>]*tabindex\s*=\s*[""']?[0-9-]+[""']?[^>]*>)/gi,
+      (match, tag) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  ⌨️ Added role="button" to focusable ${tag}`));
-        return `<${tag}${attrs} role="button"${end}`;
+        return match.replace(/(<[^>]*?)(\s*>)/i, '$1 role="button"$2');
       }
     );
     
     // Fix navigation lists that should be menus
     fixed = fixed.replace(
-      /<ul([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<ul([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  📋 Added role="menubar" to navigation list`));
-        return `<ul${attrs} role="menubar"${end}`;
+        return match.replace(/(<ul[^>]*?)(\s*>)/i, '$1 role="menubar"$2');
       }
     );
     
     // Fix list items in navigation menus
     fixed = fixed.replace(
-      /<li([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*)(?!.*role\s*=)([^>]*>)/gi,
-      (match, attrs, end) => {
+      /<li([^>]*class="[^"]*(?:nav|menu)[^"]*"[^>]*>)/gi,
+      (match) => {
+        // Check if role attribute already exists
+        if (/role\s*=/i.test(match)) {
+          return match; // Return unchanged if role already exists
+        }
         console.log(chalk.yellow(`  📋 Added role="menuitem" to navigation list item`));
-        return `<li${attrs} role="menuitem"${end}`;
+        return match.replace(/(<li[^>]*?)(\s*>)/i, '$1 role="menuitem"$2');
       }
     );
     
@@ -739,9 +771,153 @@ class AccessibilityFixer {
     return candidates;
   }
 
+  async cleanupDuplicateRoles(directory = '.') {
+    console.log(chalk.blue('🧹 Cleaning up duplicate role attributes...'));
+    
+    const htmlFiles = await this.findHtmlFiles(directory);
+    const results = [];
+    let totalFixedFiles = 0;
+    
+    for (const file of htmlFiles) {
+      try {
+        const content = await fs.readFile(file, 'utf8');
+        const fixed = this.cleanupDuplicateRolesInContent(content);
+        
+        if (fixed !== content) {
+          if (this.config.backupFiles) {
+            await fs.writeFile(`${file}.backup`, content);
+          }
+          
+          if (!this.config.dryRun) {
+            await fs.writeFile(file, fixed);
+          }
+          
+          console.log(chalk.green(`✅ Cleaned duplicate roles in: ${file}`));
+          results.push({ file, status: 'fixed' });
+          totalFixedFiles++;
+        } else {
+          results.push({ file, status: 'no-change' });
+        }
+      } catch (error) {
+        console.error(chalk.red(`❌ Error processing ${file}: ${error.message}`));
+        results.push({ file, status: 'error', error: error.message });
+      }
+    }
+    
+    console.log(chalk.blue(`\n📊 Summary: Cleaned duplicate roles in ${totalFixedFiles} files`));
+    return results;
+  }
+
+  cleanupDuplicateRolesInContent(content) {
+    let fixed = content;
+    let changesMade = false;
+    
+    // Pattern to match duplicate role attributes
+    // Matches: role="value" role="value" or role="value" role="value" role="value" etc.
+    const duplicateRolePattern = /(\s+role\s*=\s*["']([^"']+)["'])(\s+role\s*=\s*["']\2["'])+/gi;
+    
+    fixed = fixed.replace(duplicateRolePattern, (match, firstRole, roleValue) => {
+      changesMade = true;
+      console.log(chalk.yellow(`  🧹 Removed duplicate role="${roleValue}" attributes`));
+      return firstRole; // Keep only the first occurrence
+    });
+    
+    // Also handle cases where roles have different quotes but same value
+    // e.g., role="button" role='button'
+    const mixedQuotePattern = /(\s+role\s*=\s*["']([^"']+)["'])(\s+role\s*=\s*['"]?\2['"]?)+/gi;
+    
+    fixed = fixed.replace(mixedQuotePattern, (match, firstRole, roleValue) => {
+      if (!changesMade) { // Only log if not already logged above
+        changesMade = true;
+        console.log(chalk.yellow(`  🧹 Removed duplicate role="${roleValue}" attributes (mixed quotes)`));
+      }
+      return firstRole;
+    });
+    
+    return fixed;
+  }
+
+  async fixAllAccessibilityIssues(directory = '.') {
+    console.log(chalk.blue('🚀 Starting comprehensive accessibility fixes...'));
+    
+    const results = {
+      lang: [],
+      alt: [],
+      roles: [],
+      cleanup: []
+    };
+    
+    try {
+      // Step 1: Fix lang attributes
+      console.log(chalk.yellow('\n📝 Step 1: HTML lang attributes...'));
+      results.lang = await this.fixHtmlLang(directory);
+      
+      // Step 2: Fix alt attributes
+      console.log(chalk.yellow('\n🖼️ Step 2: Alt attributes...'));
+      results.alt = await this.fixEmptyAltAttributes(directory);
+      
+      // Step 3: Fix role attributes
+      console.log(chalk.yellow('\n🎭 Step 3: Role attributes...'));
+      results.roles = await this.fixRoleAttributes(directory);
+      
+      // Step 4: Cleanup duplicate roles
+      console.log(chalk.yellow('\n🧹 Step 4: Cleanup duplicate roles...'));
+      results.cleanup = await this.cleanupDuplicateRoles(directory);
+      
+      // Summary
+      const totalFiles = new Set([
+        ...results.lang.map(r => r.file),
+        ...results.alt.map(r => r.file),
+        ...results.roles.map(r => r.file),
+        ...results.cleanup.map(r => r.file)
+      ]).size;
+      
+      const totalFixed = new Set([
+        ...results.lang.filter(r => r.status === 'fixed').map(r => r.file),
+        ...results.alt.filter(r => r.status === 'fixed').map(r => r.file),
+        ...results.roles.filter(r => r.status === 'fixed').map(r => r.file),
+        ...results.cleanup.filter(r => r.status === 'fixed').map(r => r.file)
+      ]).size;
+      
+      const totalIssues = 
+        results.lang.filter(r => r.status === 'fixed').length +
+        results.alt.reduce((sum, r) => sum + (r.issues || 0), 0) +
+        results.roles.reduce((sum, r) => sum + (r.issues || 0), 0) +
+        results.cleanup.filter(r => r.status === 'fixed').length;
+      
+      console.log(chalk.green('\n🎉 All accessibility fixes completed!'));
+      console.log(chalk.blue('📊 Final Summary:'));
+      console.log(chalk.white(`   Total files scanned: ${totalFiles}`));
+      console.log(chalk.green(`   Files fixed: ${totalFixed}`));
+      console.log(chalk.yellow(`   Total issues resolved: ${totalIssues}`));
+      
+      if (this.config.dryRun) {
+        console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+      }
+      
+      return results;
+      
+    } catch (error) {
+      console.error(chalk.red('❌ Error during comprehensive fix:'), error.message);
+      throw error;
+    }
+  }
+
   async findHtmlFiles(directory) {
     const files = [];
     
+    // Check if the path is a file or directory
+    const stat = await fs.stat(directory);
+    
+    if (stat.isFile()) {
+      // If it's a file, check if it's HTML
+      if (directory.endsWith('.html')) {
+        files.push(directory);
+      }
+      return files;
+    }
+    
+    // If it's a directory, scan recursively
     async function scan(dir) {
       const entries = await fs.readdir(dir, { withFileTypes: true });
       

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Automated accessibility fixes for HTML files - Alt attributes, Lang attributes, Role attributes. Smart context-aware alt text generation and comprehensive role attribute management.",
   "main": "index.js",
   "bin": {
@@ -11,9 +11,9 @@
     "start": "node cli.js",
     "fix": "node cli.js",
     "preview": "node cli.js --dry-run",
-    "test": "node example.js",
+    "test": "node test-package.js",
     "demo": "node cli.js --dry-run demo",
-    "prepublishOnly": "npm run demo"
+    "prepublishOnly": "npm run test"
   },
   "keywords": [
     "accessibility",