gbu-accessibility-package 1.1.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,335 +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
-- ✅ **Duplicate Cleanup**: Tự động xóa duplicate role attributes
-- ✅ **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
-- ✅ **Comprehensive mode**: Chạy tất cả fixes trong một lần
+- 🖼️ **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
-
-# Local
-yarn add gbu-accessibility-package --dev
-```
+# Fix current directory
+gbu-a11y
 
-## 🛠️ Sử dụng
+# Preview changes (dry run)
+gbu-a11y --dry-run
 
-### Cách 1: Sử dụng CLI (Global Install)
+# Fix specific directory
+gbu-a11y ./src
 
-```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 --comprehensive",
-    "preview-a11y": "gbu-a11y --comprehensive --dry-run",
-    "cleanup-roles": "gbu-a11y --cleanup-only"
-  }
-}
+```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');
+```html
+<!-- Before -->
+<img src="test.jpg" role="img" role="img" alt="Test">
+
+<!-- After -->
+<img src="test.jpg" role="img" alt="Test">
 ```
 
-### 4. cleanupDuplicateRoles(directory)
-Xóa duplicate role attributes
+## 🌟 Smart Alt Text Generation
 
-```javascript
-const results = await fixer.cleanupDuplicateRoles('./src');
-```
+The package uses intelligent context analysis to generate meaningful alt text:
 
-### 5. fixAllAccessibilityIssues(directory)
-Chạy tất cả fixes bao gồm cleanup (khuyến nghị)
+### 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**
 
-```javascript
-const results = await fixer.fixAllAccessibilityIssues('./src');
-```
+### Fallback Patterns
+- `logo.png` → "ロゴ" (Logo)
+- `icon.svg` → "アイコン" (Icon)
+- `banner.jpg` → "バナー" (Banner)
+- `chart.png` → "グラフ" (Chart)
+- Generic images → "画像" (Image)
 
-### 6. addMainLandmarks(directory)
-Phát hiện và suggest main landmarks
+## 📊 Output Examples
 
-```javascript
-const suggestions = await fixer.addMainLandmarks('./src');
+### Standard Mode
 ```
+🚀 Starting Accessibility Fixer...
+📝 Step 1: Fixing HTML lang attributes...
+✅ Fixed lang attributes in 5 files
 
-## 🎯 Ví dụ kết quả
+🖼️ Step 2: Fixing alt attributes...
+✅ Fixed alt attributes in 12 files (34 issues)
 
-### Alt Attributes
-```html
-<!-- Trước -->
-<img src="logo.png">
-<img src="icon.png" alt="">
+🎭 Step 3: Fixing role attributes...  
+✅ Fixed role attributes in 8 files (67 issues)
 
-<!-- Sau -->
-<img src="logo.png" alt="ロゴ">
-<img src="icon.png" alt="アイコン">
-```
+📊 Summary:
+   Total files scanned: 25
+   Files fixed: 15
+   Total issues resolved: 106
 
-### 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>
+🎉 All accessibility fixes completed successfully!
 ```
 
-### Duplicate Cleanup
-```html
-<!-- Trước -->
-<img src="logo.png" alt="Logo" role="img" role="img" role="img">
-<a href="/home" role="link" role="link">Home</a>
-<button onclick="click()" role="button" role="button">Click</button>
-
-<!-- Sau -->
-<img src="logo.png" alt="Logo" role="img">
-<a href="/home" role="link">Home</a>
-<button onclick="click()" role="button">Click</button>
+### Comprehensive Mode
 ```
-
-### Lang Attributes
-```html
-<!-- Trước -->
-<html>
-
-<!-- Sau -->
-<html lang="ja">
+🎯 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
 ```
 
-## 🔧 Customization
+## 🔒 Safety Features
 
-### Thay đổi ngôn ngữ cho alt text
+- **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
 
-Sửa method `generateAltText` trong `lib/fixer.js`:
+## 🛠️ Configuration
 
-```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ì 'アイコン'
+### 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"
   }
-  // ... thêm các cases khác
 }
 ```
 
-### 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'
-);
-```
-
-## 🚨 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
-
-## 📊 Monitoring Results
-
-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
+### CI/CD Integration
+```yaml
+# GitHub Actions example
+- name: Check Accessibility
+  run: npx gbu-accessibility-package --dry-run
 
-```
-📁 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
+- name: Fix Accessibility Issues  
+  run: npx gbu-accessibility-package --comprehensive
 ```
 
-## 🛠️ Troubleshooting
+## 🤝 Contributing
 
-### Lỗi "Cannot find module"
-```bash
-cd accessibility-package
-npm install
-```
+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
 
-### 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);
-}
-```
+## 📝 License
 
-### 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
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## 📝 License
+## 🆘 Support
 
-MIT License - Tự do sử dụng cho mọi dự án.
+- 📧 **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)
 
-## 🤝 Contributing
+## 🏆 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/demo/duplicate-roles.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Test Duplicate Roles</title>
 </head>
@@ -7,29 +7,29 @@
     <h1>Test Duplicate Role Attributes</h1>
     
     <!-- Images with duplicate roles -->
-    <img src="logo.png" alt="Logo" role="img" role="img">
-    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img">
+    <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">Home</a>
-    <a href="/about" role="link" role="link" role="link">About</a>
+    <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">Submit</button>
+    <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'>Toggle</div>
-    <span onclick="show()" role='button' role="button">Show</span>
+    <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">
-            <li class="nav-item" role="menuitem" role="menuitem">
-                <a href="/products" role="link" role="link">Products</a>
+        <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">
-                <a href="/services" role="link" role="link" role="link">Services</a>
+            <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>
@@ -37,9 +37,9 @@
     <!-- Complex duplicates -->
     <article>
         <h2>Article with Issues</h2>
-        <img src="article1.jpg" alt="Article Image" role="img" role="img">
+        <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">Read More</a>
+        <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

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="ja">
 <head>
     <title>Test Duplicate Roles</title>
 </head>
@@ -7,29 +7,29 @@
     <h1>Test Duplicate Role Attributes</h1>
     
     <!-- Images with duplicate roles -->
-    <img src="logo.png" alt="Logo" role="img" role="img">
-    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img">
+    <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">Home</a>
-    <a href="/about" role="link" role="link" role="link">About</a>
+    <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">Submit</button>
+    <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'>Toggle</div>
-    <span onclick="show()" role='button' role="button">Show</span>
+    <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">
-            <li class="nav-item" role="menuitem" role="menuitem">
-                <a href="/products" role="link" role="link">Products</a>
+        <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">
-                <a href="/services" role="link" role="link" role="link">Services</a>
+            <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>
@@ -37,9 +37,9 @@
     <!-- Complex duplicates -->
     <article>
         <h2>Article with Issues</h2>
-        <img src="article1.jpg" alt="Article Image" role="img" role="img">
+        <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">Read More</a>
+        <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');
       }
     );
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "1.1.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",