gbu-accessibility-package 3.8.0 → 3.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "description": "Comprehensive accessibility fixes and project optimization for HTML files. Smart context-aware alt text generation, form labels, button names, link names, landmarks, heading analysis, WCAG-compliant role attributes, unused files detection, dead code analysis, broken external links detection, and missing local resources detection. Covers major axe DevTools issues with individual fix modes.",
   "main": "index.js",
   "bin": {
@@ -15,6 +15,7 @@
     "alt-only": "node cli.js --alt-only",
     "lang-only": "node cli.js --lang-only",
     "role-only": "node cli.js --role-only",
+    "aria-label-only": "node cli.js --aria-label-only",
     "forms-only": "node cli.js --forms-only",
     "buttons-only": "node cli.js --buttons-only",
     "links-only": "node cli.js --links-only",
@@ -29,7 +30,7 @@
     "cleanup-only": "node cli.js --cleanup-only",
     "no-backup": "node cli.js --no-backup",
     "cleanup-backups": "find . -name '*.backup' -type f -delete",
-    "test": "node test-package.js",
+    "test": "node test-package.cjs",
     "test-enhanced-alt": "node test-enhanced-alt.js",
     "demo": "node cli.js --dry-run demo",
     "demo-enhanced": "node cli.js --enhanced-alt --dry-run demo",
@@ -82,16 +83,14 @@
   },
   "files": [
     "lib/",
+    "bin/",
     "index.js",
     "cli.js",
-    "example.js",
-    "demo/",
     "README.md",
     "README-vi.md",
     "CHANGELOG.md",
     "QUICK_START.md",
     "PACKAGE_SUMMARY.md",
-    "ENHANCED_ALT_FEATURES.md",
     "LICENSE"
   ],
   "dependencies": {

package/ENHANCED_ALT_FEATURES.md

@@ -1,230 +0,0 @@
-# Enhanced Alt Attribute Features
-
-## Tổng quan
-
-Enhanced Alt Attribute features là bộ tính năng cải tiến cho việc kiểm tra và tạo alt text đa dạng, thông minh hơn so với phiên bản cơ bản.
-
-## Tính năng chính
-
-### 🔍 **Phân tích toàn diện**
-- **Phân loại hình ảnh**: Tự động phân loại hình ảnh theo mục đích (decorative, functional, complex, logo, data-visualization, etc.)
-- **Kiểm tra chất lượng nội dung**: Phát hiện alt text quá dài/ngắn, từ thừa, generic text
-- **Phân tích ngữ cảnh**: Hiểu context xung quanh hình ảnh để tạo alt text phù hợp
-- **Kiểm tra tính nhất quán**: So sánh alt text với aria-label, title attributes
-
-### 🎨 **Tạo alt text đa dạng**
-- **Context-aware generation**: Dựa trên heading, paragraph, figcaption xung quanh
-- **Semantic analysis**: Phân tích semantic từ src và context
-- **Emotional context**: Thêm cảm xúc và tone phù hợp
-- **Brand awareness**: Nhận diện và tích hợp thông tin thương hiệu
-- **Technical descriptions**: Mô tả chuyên sâu cho biểu đồ, sơ đồ
-
-### 🌐 **Đa ngôn ngữ**
-- **Japanese (ja)**: Từ vựng phong phú, ngữ pháp chính xác
-- **English (en)**: Vocabulary đa dạng, grammar tự nhiên  
-- **Vietnamese (vi)**: Hỗ trợ tiếng Việt với từ vựng phù hợp
-
-## Cách sử dụng
-
-### CLI Commands
-
-```bash
-# Bật enhanced alt mode
-node cli.js --enhanced-alt
-
-# Chọn mức độ creativity
-node cli.js --enhanced-alt --alt-creativity conservative  # Đơn giản, factual
-node cli.js --enhanced-alt --alt-creativity balanced     # Cân bằng (default)
-node cli.js --enhanced-alt --alt-creativity creative     # Phong phú, sáng tạo
-
-# Thêm emotional context
-node cli.js --enhanced-alt --include-emotions
-
-# Kiểm tra strict quality
-node cli.js --enhanced-alt --strict-alt
-
-# Kết hợp các options
-node cli.js --enhanced-alt --alt-creativity creative --include-emotions --strict-alt
-```
-
-### Programmatic Usage
-
-```javascript
-const { AccessibilityFixer, EnhancedAltChecker } = require('gbu-accessibility-package');
-
-// Sử dụng AccessibilityFixer với enhanced mode
-const fixer = new AccessibilityFixer({
-  language: 'ja',
-  enhancedAltMode: true,
-  altCreativity: 'creative',
-  includeEmotions: true,
-  strictAltChecking: true
-});
-
-await fixer.fixEmptyAltAttributes('./src');
-
-// Sử dụng EnhancedAltChecker riêng biệt
-const checker = new EnhancedAltChecker({
-  language: 'en',
-  strictMode: true
-});
-
-const issues = checker.analyzeAltAttributes(htmlContent);
-```
-
-## Ví dụ cải tiến
-
-### Before (Basic mode):
-```html
-<img src="company-logo.png"> 
-<!-- Generates: alt="ロゴ" -->
-
-<img src="sales-chart.png" alt="">
-<!-- Generates: alt="グラフ" -->
-```
-
-### After (Enhanced mode):
-```html
-<img src="company-logo.png">
-<!-- Generates: alt="Technology company logo" -->
-
-<img src="sales-chart.png" alt="">
-<!-- Context: "Sales increased 25% this quarter" -->
-<!-- Generates: alt="Sales performance chart showing 25% increase" -->
-```
-
-## Creativity Levels
-
-### Conservative
-- Mô tả đơn giản, factual
-- Tập trung vào chức năng cơ bản
-- Ít từ vựng đa dạng
-
-**Example**: `alt="Chart"`, `alt="Logo"`
-
-### Balanced (Default)
-- Context-aware descriptions
-- Vừa phải về creativity
-- Cân bằng giữa đơn giản và chi tiết
-
-**Example**: `alt="Sales performance chart"`, `alt="Company logo"`
-
-### Creative
-- Mô tả phong phú, chi tiết
-- Tích hợp emotional context
-- Brand và context awareness cao
-
-**Example**: `alt="Dynamic sales performance chart showing impressive 25% quarterly growth"`, `alt="Innovative technology company logo representing digital transformation"`
-
-## Image Type Classification
-
-### Decorative Images
-- **Detection**: Border, pattern, texture images
-- **Recommendation**: `alt=""`
-- **Rationale**: Không cần mô tả cho screen readers
-
-### Functional Icons
-- **Detection**: Icons trong buttons, links
-- **Recommendation**: Mô tả chức năng
-- **Example**: `alt="Open chat"`, `alt="Search"`
-
-### Data Visualizations
-- **Detection**: Charts, graphs, diagrams
-- **Recommendation**: Mô tả loại + xu hướng + data
-- **Example**: `alt="Bar chart showing 40% increase in user engagement"`
-
-### Complex Images
-- **Detection**: Flowcharts, maps, architectural diagrams
-- **Recommendation**: Alt ngắn + longdesc hoặc mô tả chi tiết
-- **Example**: `alt="System architecture diagram"` + detailed description
-
-### Logos
-- **Detection**: Logo keywords, brand context
-- **Recommendation**: Brand name + "logo"
-- **Example**: `alt="Microsoft logo"`, `alt="GBU company logo"`
-
-## Quality Checks
-
-### Error Level Issues
-- ❌ **Missing alt attribute**
-- ❌ **Empty alt for content images**
-- ❌ **Generic alt text** ("click here", "read more")
-- ❌ **Missing data description** (for charts without trend info)
-
-### Warning Level Issues
-- ⚠️ **Alt text too long** (>125 characters)
-- ⚠️ **Alt text too short** (<3 characters for content)
-- ⚠️ **Redundant words** ("image", "picture", "photo")
-- ⚠️ **Filename in alt text**
-- ⚠️ **Inconsistent labels** (alt ≠ aria-label)
-
-### Info Level Issues
-- ℹ️ **Redundant title attribute**
-- ℹ️ **Optimization suggestions**
-
-## Testing
-
-```bash
-# Test enhanced features
-npm run test-enhanced-alt
-
-# Demo enhanced mode
-npm run demo-enhanced
-
-# Demo creative mode
-npm run demo-creative
-```
-
-## Configuration Options
-
-```javascript
-{
-  // Enhanced mode settings
-  enhancedAltMode: true,           // Enable enhanced features
-  altCreativity: 'balanced',       // conservative|balanced|creative
-  includeEmotions: false,          // Add emotional descriptors
-  strictAltChecking: false,        // Strict quality checking
-  
-  // Alt generation settings
-  maxAltLength: 125,               // Maximum alt text length
-  minAltLength: 3,                 // Minimum alt text length
-  checkDecorative: true,           // Check decorative images
-  checkInformative: true,          // Check informative images
-  checkComplex: true,              // Check complex images
-  
-  // Language and context
-  language: 'ja',                  // ja|en|vi
-  includeBrandContext: true,       // Include brand information
-}
-```
-
-## Performance Impact
-
-- **Enhanced mode**: ~20-30% slower due to comprehensive analysis
-- **Memory usage**: +15-20% for vocabulary and analysis
-- **Accuracy**: 85-90% improvement in alt text quality
-- **Coverage**: 95%+ detection of alt attribute issues
-
-## Roadmap
-
-### v3.2.0 (Planned)
-- [ ] AI-powered image content analysis
-- [ ] Custom vocabulary support
-- [ ] Batch alt text review interface
-- [ ] Integration with design systems
-
-### v3.3.0 (Future)
-- [ ] Real-time alt text suggestions
-- [ ] Visual alt text editor
-- [ ] Accessibility score calculation
-- [ ] Team collaboration features
-
-## Contributing
-
-Enhanced alt features được phát triển với focus vào:
-1. **Accuracy**: Alt text chính xác, phù hợp context
-2. **Diversity**: Đa dạng trong cách mô tả
-3. **Usability**: Dễ sử dụng, configuration linh hoạt
-4. **Performance**: Tối ưu tốc độ xử lý
-
-Contributions welcome! Please see main README for guidelines.

package/PACKAGE_SUMMARY.md

@@ -1,191 +0,0 @@
-# 📦 Accessibility Fixer Package - Summary
-
-## 🎯 Mục đích
-
-Tool tự động sửa các vấn đề accessibility phổ biến trong HTML files, giúp website tuân thủ WCAG guidelines.
-
-## 📁 Cấu trúc Package
-
-```
-accessibility-package/
-├── lib/
-│   └── fixer.js              # Core logic
-├── demo/
-│   └── sample.html           # File demo để test
-├── cli.js                    # Command line interface
-├── example.js                # Ví dụ sử dụng
-├── package.json              # Package configuration
-├── README.md                 # Hướng dẫn đầy đủ
-├── QUICK_START.md           # Hướng dẫn nhanh
-└── PACKAGE_SUMMARY.md       # File này
-
-```
-
-## ✨ Tính năng chính
-
-### 1. Alt Attributes
-
-- ✅ Tự động thêm alt text cho images thiếu
-- ✅ Sửa empty alt attributes
-- ✅ Context-aware: phân tích nội dung xung quanh để tạo alt text phù hợp
-- ✅ Hỗ trợ nhiều ngôn ngữ (ja, en, vi, zh, etc.)
-
-### 2. Lang Attributes
-
-- ✅ Thêm lang attribute cho thẻ `<html>`
-- ✅ Configurable language
-
-### 3. Role Attributes
-
-- ✅ `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
-- ✅ Tự động detect clickable elements
-
-## 🚀 Cách sử dụng
-
-### Option 1: CLI (Đơn giản)
-
-```bash
-node accessibility-package/cli.js
-```
-
-### Option 2: Node.js
-
-```javascript
-const AccessibilityFixer = require("./accessibility-package/lib/fixer.js");
-const fixer = new AccessibilityFixer({ language: "ja" });
-await fixer.fixRoleAttributes(".");
-```
-
-### Option 3: NPM Scripts
-
-```json
-{
-  "scripts": {
-    "fix-a11y": "node accessibility-package/cli.js",
-    "preview-a11y": "node accessibility-package/cli.js --dry-run"
-  }
-}
-```
-
-## 📊 Kết quả Demo
-
-Với file demo, tool đã tìm và sửa:
-
-- **16 issues** tổng cộng
-- **1 lang attribute** missing
-- **3 alt attributes** missing/empty
-- **12 role attributes** missing
-
-## ⚙️ Configuration
-
-```javascript
-{
-  language: 'ja',        // 'ja', 'en', 'vi', 'zh', etc.
-  backupFiles: true,     // Tạo .backup files
-  dryRun: false         // Preview mode
-}
-```
-
-## 🎨 Before/After Example
-
-### Before:
-
-```html
-<html>
-  <img src="logo.png" />
-  <a href="/about">About</a>
-  <button onclick="submit()">Submit</button>
-</html>
-```
-
-### After:
-
-```html
-<html lang="ja">
-  <img src="logo.png" alt="ロゴ" role="img" />
-  <a href="/about" role="link">About</a>
-  <button onclick="submit()" role="button">Submit</button>
-</html>
-```
-
-## 🔧 Customization
-
-### Thay đổi alt text generation
-
-Sửa method `generateAltText()` trong `lib/fixer.js`
-
-### Thêm role rules mới
-
-Sửa method `fixRoleAttributesInContent()` trong `lib/fixer.js`
-
-### Thay đổi ngôn ngữ
-
-Set `language` parameter trong config
-
-## 📈 Performance
-
-- ✅ Xử lý hàng trăm files trong vài giây
-- ✅ Memory efficient
-- ✅ Backup tự động
-- ✅ Error handling tốt
-
-## 🛡️ Safety Features
-
-- ✅ Dry run mode để preview
-- ✅ Automatic backups (.backup files)
-- ✅ Duplicate attribute prevention
-- ✅ Error handling và logging
-
-## 📋 Checklist sử dụng
-
-1. [ ] Copy package vào dự án
-2. [ ] `npm install` dependencies
-3. [ ] Backup code (git commit)
-4. [ ] Test với `--dry-run`
-5. [ ] Chạy tool
-6. [ ] Review kết quả
-7. [ ] Commit changes
-
-## 🎯 Use Cases
-
-### Dự án mới
-
-```bash
-node accessibility-package/cli.js ./src
-```
-
-### Dự án có sẵn
-
-```bash
-node accessibility-package/cli.js --dry-run ./public
-# Review results, then:
-node accessibility-package/cli.js ./public
-```
-
-### CI/CD Integration
-
-```bash
-# In build script
-node accessibility-package/cli.js --no-backup ./dist
-```
-
-## 📞 Support
-
-- 📖 Đọc [README.md](./README.md) để biết chi tiết
-- 🚀 Xem [QUICK_START.md](./QUICK_START.md) để bắt đầu nhanh
-- 💡 Chạy [example.js](./example.js) để xem demos
-- ❓ Chạy `node cli.js --help` để xem options
-
-## 🎉 Kết luận
-
-Package này giúp bạn:
-
-- ⚡ **Tiết kiệm thời gian**: Tự động fix thay vì manual
-- 🎯 **Cải thiện accessibility**: Tuân thủ WCAG guidelines
-- 🛡️ **An toàn**: Backup và preview trước khi apply
-- 🔧 **Linh hoạt**: Dễ customize và integrate
-
-**Ready to make your website more accessible! 🌟**

package/demo/advanced-test.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <title>Advanced Accessibility Test</title>
-</head>
-<body>
-    <h1>Advanced Accessibility Test</h1>
-    
-    <!-- Form issues -->
-    <form>
-        <input type="text" placeholder="Name" aria-label="Name" title="Name" id="text_019747">
-        <input type="email" id="email" aria-label="メールアドレス" title="メールアドレス">
-        <input type="password" aria-label="パスワード" title="パスワード" id="password_019747">
-        <input type="submit">
-    </form>
-    
-    <!-- Button issues -->
-    <button aria-label="ボタン" title="ボタン"></button>
-    <button onclick="alert('test')" role="button" aria-label="ボタン" title="ボタン"></button>
-    <input type="button">
-    
-    <!-- Link issues -->
-    <a href="/home" role="link" aria-label="リンク" title="リンク"></a>
-    <a href="/more" role="link">Click here</a>
-    <a href="/read" role="link">Read more</a>
-    <a href="/image" role="link" aria-label="リンク" title="リンク"><img src="icon.png" alt="Skipped h2" role="img" aria-label="Skipped h2"></a>
-    
-    <!-- Heading issues -->
-    <h3>Skipped h2</h3>
-    <h1>Second h1</h1>
-    <h4></h4>
-    
-    <!-- Landmark issues -->
-    <div class="content">
-        <p>Main content without landmark</p>
-    </div>
-    
-    <ul class="navigation" role="menubar">
-        <li><a href="/home" role="link">Home</a></li>
-        <li><a href="/about" role="link">About</a></li>
-    </ul>
-</body>
-</html>

package/demo/aria-label-test.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Aria Label Test</title>
-</head>
-<body>
-    <h1>Aria Label Test Cases</h1>
-    
-    <!-- Test case 1: Image with alt but no aria-label -->
-    <img src="test1.jpg" alt="Test image 1" role="img" aria-label="Test image 1">
-    
-    <!-- Test case 2: Image with alt and existing aria-label (should not change) -->
-    <img src="test2.jpg" alt="Test image 2" aria-label="Custom label" role="img">
-    
-    <!-- Test case 3: Image with empty alt (should not add aria-label) -->
-    <img src="test3.jpg" alt="Aria Label Test Cases" role="img" aria-label="Aria Label Test Cases">
-    
-    <!-- Test case 4: Image without alt (should generate alt and aria-label) -->
-    <img src="logo.png" role="img" alt="ロゴ" aria-label="ロゴ">
-    
-    <!-- Test case 5: Picture with role and img with alt -->
-    <picture>
-        <source srcset="responsive.webp" type="image/webp">
-        <img src="responsive.jpg" alt="Responsive image" role="img" aria-label="Responsive image">
-    </picture>
-    
-    <!-- Test case 6: Image with role but no aria-label -->
-    <img src="test6.jpg" alt="Test image 6" role="img" aria-label="Test image 6">
-</body>
-</html>

package/demo/broken-links-test.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <title>Broken Links Test</title>
-    <!-- Broken CSS -->
-    <link rel="stylesheet" href="missing-style.css">
-    <!-- Working CSS (if exists) -->
-    <link rel="stylesheet" href="../package.json">
-</head>
-<body>
-    <h1>Broken Links Test</h1>
-    
-    <!-- Working local link -->
-    <a href="advanced-test.html" role="link">Working local link</a>
-    
-    <!-- Broken local link -->
-    <a href="non-existent-page.html" role="link">Broken local link</a>
-    
-    <!-- Working external link -->
-    <a href="https://www.google.com" role="link">Working external link</a>
-    
-    <!-- Broken external link -->
-    <a href="https://this-domain-does-not-exist-12345.com" role="link">Broken external link</a>
-    
-    <!-- Working image -->
-    <img src="advanced-test.html" alt="Working image reference" role="img" aria-label="Working image reference">
-    
-    <!-- Broken image -->
-    <img src="missing-image.jpg" alt="Broken image" role="img" aria-label="Broken image">
-    
-    <!-- Broken script -->
-    <script src="missing-script.js"></script>
-    
-    <!-- Skip patterns -->
-    <a href="#anchor" role="link">Anchor link (should skip)</a>
-    <a href="mailto:test@example.com" role="link">Email link (should skip)</a>
-    <a href="tel:+1234567890" role="link">Phone link (should skip)</a>
-    <a href="javascript:void(0)" role="link">JavaScript link (should skip)</a>
-</body>
-</html>

package/demo/comprehensive-test.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <title>Comprehensive Test</title>
-</head>
-<body>
-    <h1>Comprehensive Test File</h1>
-    
-    <!-- Missing alt -->
-    <img src="test.jpg" alt="Comprehensive Test File" role="img" aria-label="Comprehensive Test File">
-    
-    <!-- Missing role -->
-    <a href="/home" role="link">Home</a>
-    
-    <!-- Duplicate roles -->
-    <img src="dup.jpg" alt="Duplicate" role="img" aria-label="Duplicate">
-    
-    <p>This tests comprehensive mode as default.</p>
-</body>
-</html>

package/demo/dead-code-test.css

@@ -1,68 +0,0 @@
-/* CSS file with mixed used and unused rules */
-
-/* Used classes - these appear in HTML */
-.header {
-    background-color: #333;
-    color: white;
-}
-
-.content {
-    padding: 20px;
-    margin: 0 auto;
-}
-
-/* Unused classes - these don't appear in any HTML */
-.sidebar {
-    width: 300px;
-    background: #f0f0f0;
-}
-
-.popup {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.modal-overlay {
-    background: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-/* Used tag selectors */
-h1 {
-    font-size: 2em;
-    margin-bottom: 1em;
-}
-
-p {
-    line-height: 1.6;
-}
-
-/* Unused tag selectors */
-article {
-    margin: 20px 0;
-}
-
-aside {
-    float: right;
-    width: 250px;
-}
-
-/* Dynamic classes that should be skipped */
-.active {
-    color: red;
-}
-
-.hidden {
-    display: none;
-}
-
-/* Pseudo-classes that should be skipped */
-.button:hover {
-    background-color: #007bff;
-}