gbu-accessibility-package 3.8.0 → 3.8.1

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.8.1] - 2025-10-04
+
+### Changed
+- **Package Cleanup**: Removed unnecessary files and folders from npm package
+  - Excluded `demo/` folder from published package (development examples only)
+  - Excluded `ENHANCED_ALT_FEATURES.md` from published package (internal documentation)  
+  - Excluded `example.js` and test files from published package
+  - Updated `.npmignore` and `package.json` files field to ensure clean deployments
+  - Reduced package size from ~3MB to ~330KB (unpacked) by removing demo assets
+
+### Fixed
+- **Absolute Path Resolution**: Fixed bug in 404 resources checking where absolute paths (e.g., `/demo/image.png`) were incorrectly resolved from HTML file directory instead of project root
+
 ## [3.8.0] - 2025-10-03
 
 ### Added

package/bin/fix.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+
+/**
+ * CLI tool for accessibility fixes
+ */
+
+const { program } = require('commander');
+const { AccessibilityFixer } = require('../index');
+const chalk = require('chalk');
+
+program
+  .name('a11y-fix')
+  .description('Accessibility fixing CLI tool')
+  .version('1.0.0');
+
+program
+  .command('lang')
+  .description('Fix HTML lang attributes')
+  .option('-d, --directory <dir>', 'Directory to scan', '.')
+  .option('-l, --language <lang>', 'Language code', 'ja')
+  .option('--no-backup', 'Skip creating backup files')
+  .option('--dry-run', 'Show what would be changed without making changes')
+  .action(async (options) => {
+    try {
+      const fixer = new AccessibilityFixer({
+        language: options.language,
+        backupFiles: options.backup,
+        dryRun: options.dryRun
+      });
+
+      const results = await fixer.fixHtmlLang(options.directory);
+      
+      const fixed = results.filter(r => r.status === 'fixed').length;
+      const errors = results.filter(r => r.status === 'error').length;
+      
+      console.log(chalk.green(`\n✅ Lang attribute fixes completed!`));
+      console.log(`   Files fixed: ${fixed}`);
+      console.log(`   Errors: ${errors}`);
+      
+    } catch (error) {
+      console.error(chalk.red(`❌ Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+program
+  .command('alt')
+  .description('Fix empty alt attributes')
+  .option('-d, --directory <dir>', 'Directory to scan', '.')
+  .option('--no-backup', 'Skip creating backup files')
+  .option('--dry-run', 'Show what would be changed without making changes')
+  .action(async (options) => {
+    try {
+      const fixer = new AccessibilityFixer({
+        backupFiles: options.backup,
+        dryRun: options.dryRun
+      });
+
+      const results = await fixer.fixEmptyAltAttributes(options.directory);
+      
+      const fixed = results.filter(r => r.status === 'fixed').length;
+      const errors = results.filter(r => r.status === 'error').length;
+      
+      console.log(chalk.green(`\n✅ Alt attribute fixes completed!`));
+      console.log(`   Files fixed: ${fixed}`);
+      console.log(`   Errors: ${errors}`);
+      
+    } catch (error) {
+      console.error(chalk.red(`❌ Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+program
+  .command('role')
+  .description('Fix role attributes')
+  .option('-d, --directory <dir>', 'Directory to scan', '.')
+  .option('--no-backup', 'Skip creating backup files')
+  .option('--dry-run', 'Show what would be changed without making changes')
+  .action(async (options) => {
+    try {
+      const fixer = new AccessibilityFixer({
+        backupFiles: options.backup,
+        dryRun: options.dryRun
+      });
+
+      const results = await fixer.fixRoleAttributes(options.directory);
+      
+      const fixed = results.filter(r => r.status === 'fixed').length;
+      const errors = results.filter(r => r.status === 'error').length;
+      
+      console.log(chalk.green(`\n✅ Role attribute fixes completed!`));
+      console.log(`   Files fixed: ${fixed}`);
+      console.log(`   Errors: ${errors}`);
+      
+    } catch (error) {
+      console.error(chalk.red(`❌ Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+program
+  .command('all')
+  .description('Run all automated fixes')
+  .option('-d, --directory <dir>', 'Directory to scan', '.')
+  .option('-l, --language <lang>', 'Language code', 'ja')
+  .option('--no-backup', 'Skip creating backup files')
+  .option('--dry-run', 'Show what would be changed without making changes')
+  .action(async (options) => {
+    try {
+      const fixer = new AccessibilityFixer({
+        language: options.language,
+        backupFiles: options.backup,
+        dryRun: options.dryRun
+      });
+
+      console.log(chalk.blue('🔧 Running all accessibility fixes...\n'));
+      
+      await fixer.fixHtmlLang(options.directory);
+      await fixer.fixEmptyAltAttributes(options.directory);
+      await fixer.fixRoleAttributes(options.directory);
+      
+      const suggestions = await fixer.addMainLandmarks(options.directory);
+      
+      if (suggestions.length > 0) {
+        console.log(chalk.yellow('\n📋 Manual fixes needed:'));
+        suggestions.forEach(suggestion => {
+          console.log(`   ${suggestion.file}: ${suggestion.recommendation}`);
+        });
+      }
+      
+      console.log(chalk.green('\n✅ All automated fixes completed!'));
+      
+    } catch (error) {
+      console.error(chalk.red(`❌ Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/bin/test.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+/**
+ * CLI tool for accessibility testing
+ */
+
+const { program } = require('commander');
+const { AccessibilityTester } = require('../index');
+const chalk = require('chalk');
+
+program
+  .name('a11y-test')
+  .description('Accessibility testing CLI tool')
+  .version('1.0.0');
+
+program
+  .command('run')
+  .description('Run accessibility tests')
+  .option('-u, --base-url <url>', 'Base URL for testing', 'http://localhost:8080')
+  .option('-p, --port <port>', 'Server port', '8080')
+  .option('-o, --output <dir>', 'Output directory', 'accessibility-reports')
+  .option('-f, --files <files...>', 'HTML files to test')
+  .action(async (options) => {
+    try {
+      const tester = new AccessibilityTester({
+        baseUrl: options.baseUrl,
+        serverPort: parseInt(options.port),
+        outputDir: options.output,
+        pages: options.files || []
+      });
+
+      // Auto-discover pages if none specified
+      if (!options.files || options.files.length === 0) {
+        console.log(chalk.yellow('No files specified, auto-discovering HTML files...'));
+        const fs = require('fs').promises;
+        const files = await fs.readdir('.');
+        const htmlFiles = files.filter(f => f.endsWith('.html'));
+        tester.config.pages = htmlFiles;
+      }
+
+      const server = await tester.startServer();
+      const results = await tester.testPages();
+      
+      // Kill server
+      server.kill();
+      
+      const summary = await tester.generateSummary();
+      
+      console.log(chalk.green('\n✅ Testing completed!'));
+      console.log(chalk.blue(`📊 Summary:`));
+      console.log(`   Files tested: ${summary.totalFiles}`);
+      console.log(`   Total violations: ${summary.totalViolations}`);
+      console.log(`   Total passes: ${summary.totalPasses}`);
+      
+      if (Object.keys(summary.violationsByType).length > 0) {
+        console.log(chalk.yellow('\n🔍 Common violations:'));
+        Object.entries(summary.violationsByType)
+          .sort(([,a], [,b]) => b - a)
+          .slice(0, 5)
+          .forEach(([type, count]) => {
+            console.log(`   ${type}: ${count}`);
+          });
+      }
+      
+    } catch (error) {
+      console.error(chalk.red(`❌ Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/lib/fixer.js

@@ -3106,13 +3106,14 @@ class AccessibilityFixer {
   async checkLocalFile(url, baseDir, resourceType, elementType) {
     const path = require('path');
     
-    // Handle relative URLs
+    // Handle different URL types
     let filePath;
     if (url.startsWith('/')) {
-      // Absolute path from web root - we'll check relative to baseDir
-      filePath = path.join(baseDir, url.substring(1));
+      // Absolute path from web root - find project root and resolve from there
+      const projectRoot = this.findProjectRoot(baseDir);
+      filePath = path.join(projectRoot, url.substring(1));
     } else {
-      // Relative path
+      // Relative path - resolve relative to current HTML file directory
       filePath = path.resolve(baseDir, url);
     }
     
@@ -3126,11 +3127,41 @@ class AccessibilityFixer {
         suggestion: `Create the missing file or update the ${resourceType.toLowerCase()} path`,
         url: url,
         filePath: filePath,
+        resolvedPath: filePath,
         resourceType: resourceType
       };
     }
   }
 
+  // Helper method to find project root directory
+  findProjectRoot(startDir) {
+    const path = require('path');
+    const fs = require('fs');
+    
+    let currentDir = startDir;
+    const root = path.parse(currentDir).root;
+    
+    // Look for common project root indicators
+    while (currentDir !== root) {
+      // Check for package.json, .git, or other project indicators
+      const packageJsonPath = path.join(currentDir, 'package.json');
+      const gitPath = path.join(currentDir, '.git');
+      const nodeModulesPath = path.join(currentDir, 'node_modules');
+      
+      if (fs.existsSync(packageJsonPath) || fs.existsSync(gitPath) || fs.existsSync(nodeModulesPath)) {
+        return currentDir;
+      }
+      
+      // Move up one directory
+      const parentDir = path.dirname(currentDir);
+      if (parentDir === currentDir) break; // Reached filesystem root
+      currentDir = parentDir;
+    }
+    
+    // If no project root found, use the original baseDir (fallback)
+    return startDir;
+  }
+
   // Analyze headings (no auto-fix, only suggestions)
   async analyzeHeadings(directory = '.') {
     console.log(chalk.blue('📑 Analyzing heading structure...'));

package/package.json

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