gbu-accessibility-package 3.5.0 → 3.8.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "3.5.0",
-  "description": "Comprehensive accessibility fixes for HTML files. Smart context-aware alt text generation, form labels, button names, link names, landmarks, heading analysis, and WCAG-compliant role attributes. Covers major axe DevTools issues with individual fix modes.",
+  "version": "3.8.1",
+  "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": {
     "gbu-a11y": "cli.js",
@@ -21,6 +21,11 @@
     "landmarks-only": "node cli.js --landmarks-only",
     "headings-only": "node cli.js --headings-only",
     "links-check": "node cli.js --links-check",
+    "broken-links": "node cli.js --broken-links",
+    "404-resources": "node cli.js --404-resources",
+    "unused-files": "node cli.js --unused-files",
+    "dead-code": "node cli.js --dead-code",
+    "file-size": "node cli.js --file-size",
     "cleanup-only": "node cli.js --cleanup-only",
     "no-backup": "node cli.js --no-backup",
     "cleanup-backups": "find . -name '*.backup' -type f -delete",
@@ -51,6 +56,14 @@
     "smart-alt-text",
     "accessibility-fixer",
     "html-accessibility",
+    "unused-files",
+    "dead-code",
+    "missing-resources",
+    "404-resources",
+    "link-validation",
+    "resource-checking",
+    "project-optimization",
+    "code-analysis",
     "gbu",
     "comprehensive",
     "individual-fixes",
@@ -69,16 +82,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/demo/advanced-test.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html>
-<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">
-        <input type="email" id="email">
-        <input type="password">
-        <input type="submit">
-    </form>
-    
-    <!-- Button issues -->
-    <button></button>
-    <button onclick="alert('test')"></button>
-    <input type="button">
-    
-    <!-- Link issues -->
-    <a href="/home"></a>
-    <a href="/more">Click here</a>
-    <a href="/read">Read more</a>
-    <a href="/image"><img src="icon.png"></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">
-        <li><a href="/home">Home</a></li>
-        <li><a href="/about">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="" role="img">
-    
-    <!-- Test case 4: Image without alt (should generate alt and aria-label) -->
-    <img src="logo.png" role="img">
-    
-    <!-- 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">Working local link</a>
-    
-    <!-- Broken local link -->
-    <a href="non-existent-page.html">Broken local link</a>
-    
-    <!-- Working external link -->
-    <a href="https://www.google.com">Working external link</a>
-    
-    <!-- Broken external link -->
-    <a href="https://this-domain-does-not-exist-12345.com">Broken external link</a>
-    
-    <!-- Working image -->
-    <img src="advanced-test.html" alt="Working image reference">
-    
-    <!-- Broken image -->
-    <img src="missing-image.jpg" alt="Broken image">
-    
-    <!-- Broken script -->
-    <script src="missing-script.js"></script>
-    
-    <!-- Skip patterns -->
-    <a href="#anchor">Anchor link (should skip)</a>
-    <a href="mailto:test@example.com">Email link (should skip)</a>
-    <a href="tel:+1234567890">Phone link (should skip)</a>
-    <a href="javascript:void(0)">JavaScript link (should skip)</a>
-</body>
-</html>

package/demo/comprehensive-test.html

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

package/demo/demo.js

@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Demo script to test accessibility package functionality
- */
-
-const path = require('path');
-const { AccessibilityTester, AccessibilityFixer } = require('../index');
-const chalk = require('chalk');
-
-async function runDemo() {
-  console.log(chalk.blue('🚀 Accessibility Package Demo'));
-  console.log(chalk.blue('===============================\n'));
-
-  try {
-    // Test the fixer first
-    console.log(chalk.yellow('1. Testing Accessibility Fixer...'));
-    const fixer = new AccessibilityFixer({
-      language: 'ja',
-      dryRun: true // Don't actually modify files in demo
-    });
-
-    // Go to parent directory to find HTML files
-    const projectRoot = path.join(__dirname, '../..');
-    
-    console.log(chalk.gray(`   Scanning directory: ${projectRoot}`));
-    
-    const langResults = await fixer.fixHtmlLang(projectRoot);
-    console.log(chalk.green(`   ✅ Lang attribute check: ${langResults.length} files scanned`));
-    
-    const altResults = await fixer.fixEmptyAltAttributes(projectRoot);
-    console.log(chalk.green(`   ✅ Alt attribute check: ${altResults.length} files scanned`));
-    
-    const mainSuggestions = await fixer.addMainLandmarks(projectRoot);
-    console.log(chalk.green(`   ✅ Main landmark check: ${mainSuggestions.length} suggestions`));
-
-    console.log(chalk.yellow('\n2. Testing Accessibility Tester...'));
-    
-    // Find HTML files in project
-    const fs = require('fs').promises;
-    const files = await fs.readdir(projectRoot);
-    const htmlFiles = files.filter(f => f.endsWith('.html')).slice(0, 3); // Test first 3 files
-    
-    if (htmlFiles.length > 0) {
-      console.log(chalk.gray(`   Found HTML files: ${htmlFiles.join(', ')}`));
-      
-      const tester = new AccessibilityTester({
-        baseUrl: 'http://localhost:8080',
-        outputDir: path.join(projectRoot, 'accessibility-reports'),
-        pages: htmlFiles,
-        serverPort: 8080
-      });
-
-      console.log(chalk.gray('   Note: Actual testing requires a running server'));
-      console.log(chalk.green('   ✅ Tester configuration ready'));
-    } else {
-      console.log(chalk.yellow('   ⚠️  No HTML files found for testing'));
-    }
-
-    console.log(chalk.green('\n✅ Demo completed successfully!'));
-    console.log(chalk.blue('\n📋 Package is working correctly. You can now use:'));
-    console.log(chalk.white('   a11y-fix all --dry-run    # Preview fixes'));
-    console.log(chalk.white('   a11y-fix all              # Apply fixes'));
-    console.log(chalk.white('   a11y-test run             # Run accessibility tests'));
-
-  } catch (error) {
-    console.error(chalk.red(`❌ Demo failed: ${error.message}`));
-    console.error(chalk.gray(error.stack));
-    process.exit(1);
-  }
-}
-
-runDemo();

package/demo/duplicate-roles.html

@@ -1,45 +0,0 @@
-<!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>