gbu-accessibility-package 3.1.0 → 3.2.0

package/lib/fixer.js

@@ -6,15 +6,37 @@
 const fs = require('fs').promises;
 const path = require('path');
 const chalk = require('chalk');
+const EnhancedAltChecker = require('./enhanced-alt-checker.js');
+const EnhancedAltGenerator = require('./enhanced-alt-generator.js');
 
 class AccessibilityFixer {
   constructor(config = {}) {
     this.config = {
-      backupFiles: config.backupFiles !== false,
+      backupFiles: config.backupFiles === true,
       language: config.language || 'ja',
       dryRun: config.dryRun || false,
+      enhancedAltMode: config.enhancedAltMode || false,
+      altCreativity: config.altCreativity || 'balanced', // conservative, balanced, creative
+      includeEmotions: config.includeEmotions || false,
+      strictAltChecking: config.strictAltChecking || false,
       ...config
     };
+    
+    // Initialize enhanced alt tools
+    this.enhancedAltChecker = new EnhancedAltChecker({
+      language: this.config.language,
+      strictMode: this.config.strictAltChecking,
+      checkDecorative: true,
+      checkInformative: true,
+      checkComplex: true
+    });
+    
+    this.enhancedAltGenerator = new EnhancedAltGenerator({
+      language: this.config.language,
+      creativity: this.config.altCreativity,
+      includeEmotions: this.config.includeEmotions,
+      includeBrandContext: true
+    });
   }
 
   async fixHtmlLang(directory = '.') {
@@ -57,18 +79,50 @@ class AccessibilityFixer {
     const htmlFiles = await this.findHtmlFiles(directory);
     const results = [];
     let totalIssuesFound = 0;
+    let enhancedIssues = []; // Declare here to avoid scope issues
     
     for (const file of htmlFiles) {
       try {
         const content = await fs.readFile(file, 'utf8');
-        const issues = this.analyzeAltAttributes(content);
         
-        if (issues.length > 0) {
-          console.log(chalk.cyan(`\n📁 ${file}:`));
-          issues.forEach(issue => {
-            console.log(chalk.yellow(`  ${issue.type}: ${issue.description}`));
-            totalIssuesFound++;
-          });
+        // Use enhanced alt checker if enabled
+        if (this.config.enhancedAltMode) {
+          enhancedIssues = this.enhancedAltChecker.analyzeAltAttributes(content);
+          
+          if (enhancedIssues.length > 0) {
+            console.log(chalk.cyan(`\n📁 ${file}:`));
+            enhancedIssues.forEach(issue => {
+              console.log(chalk.yellow(`  🔍 Image ${issue.imageIndex} (${issue.src}):`));
+              issue.issues.forEach(subIssue => {
+                const icon = subIssue.severity === 'ERROR' ? '❌' : 
+                           subIssue.severity === 'WARNING' ? '⚠️' : 'ℹ️';
+                console.log(chalk.yellow(`    ${icon} ${subIssue.message}`));
+                console.log(chalk.gray(`       ${subIssue.description}`));
+              });
+              
+              // Show recommendations
+              if (issue.recommendations.length > 0) {
+                console.log(chalk.blue(`    💡 Recommendations:`));
+                issue.recommendations.forEach(rec => {
+                  console.log(chalk.blue(`       ${rec.suggestion}`));
+                  console.log(chalk.gray(`       ${rec.reason}`));
+                });
+              }
+              totalIssuesFound += issue.issues.length;
+            });
+          }
+        } else {
+          // Use original analysis
+          const issues = this.analyzeAltAttributes(content);
+          
+          if (issues.length > 0) {
+            console.log(chalk.cyan(`\n📁 ${file}:`));
+            issues.forEach(issue => {
+              console.log(chalk.yellow(`  ${issue.type}: ${issue.description}`));
+              totalIssuesFound++;
+            });
+          }
+          enhancedIssues = issues; // For consistency in results calculation
         }
         
         const fixed = this.fixAltAttributes(content);
@@ -83,9 +137,11 @@ class AccessibilityFixer {
           }
           
           console.log(chalk.green(`✅ Fixed alt attributes in: ${file}`));
-          results.push({ file, status: 'fixed', issues: issues.length });
+          results.push({ file, status: 'fixed', issues: this.config.enhancedAltMode ? 
+            enhancedIssues.reduce((sum, ei) => sum + (ei.issues ? ei.issues.length : 1), 0) : enhancedIssues.length });
         } else {
-          results.push({ file, status: 'no-change', issues: issues.length });
+          results.push({ file, status: 'no-change', issues: this.config.enhancedAltMode ? 
+            enhancedIssues.reduce((sum, ei) => sum + (ei.issues ? ei.issues.length : 1), 0) : enhancedIssues.length });
         }
       } catch (error) {
         console.error(chalk.red(`❌ Error processing ${file}: ${error.message}`));
@@ -94,6 +150,9 @@ class AccessibilityFixer {
     }
     
     console.log(chalk.blue(`\n📊 Summary: Found ${totalIssuesFound} alt attribute issues across ${results.length} files`));
+    if (this.config.enhancedAltMode) {
+      console.log(chalk.gray(`   🔍 Enhanced analysis mode: Comprehensive quality checking enabled`));
+    }
     return results;
   }
 
@@ -245,6 +304,21 @@ class AccessibilityFixer {
   }
 
   generateAltText(imgTag, htmlContent = '', imgIndex = 0) {
+    // Use enhanced alt generator if enabled
+    if (this.config.enhancedAltMode) {
+      try {
+        const analysis = this.enhancedAltChecker.analyzeImageContext(imgTag, htmlContent, imgIndex);
+        const enhancedAlt = this.enhancedAltGenerator.generateDiverseAltText(imgTag, htmlContent, analysis);
+        
+        if (enhancedAlt && enhancedAlt.trim().length > 0) {
+          return enhancedAlt;
+        }
+      } catch (error) {
+        console.warn(chalk.yellow(`⚠️ Enhanced alt generation failed, falling back to basic mode: ${error.message}`));
+      }
+    }
+    
+    // Fallback to original method
     const src = imgTag.match(/src\s*=\s*["']([^"']+)["']/i);
     const srcValue = src ? src[1].toLowerCase() : '';
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "3.1.0",
+  "version": "3.2.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.",
   "main": "index.js",
   "bin": {
@@ -24,7 +24,10 @@
     "no-backup": "node cli.js --no-backup",
     "cleanup-backups": "find . -name '*.backup' -type f -delete",
     "test": "node test-package.js",
+    "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",
+    "demo-creative": "node cli.js --enhanced-alt --alt-creativity creative --include-emotions --dry-run demo",
     "prepublishOnly": "npm run test"
   },
   "keywords": [
@@ -74,6 +77,7 @@
     "CHANGELOG.md",
     "QUICK_START.md",
     "PACKAGE_SUMMARY.md",
+    "ENHANCED_ALT_FEATURES.md",
     "LICENSE"
   ],
   "dependencies": {

package/demo/advanced-test.html.backup

@@ -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/backup-test.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Backup Test</title>
-</head>
-<body>
-    <h1>Backup Test File</h1>
-    
-    <!-- This will be fixed -->
-    <img src="test.jpg" alt="Test image" role="img" aria-label="Test image">
-    
-    <!-- This will also be fixed -->
-    <a href="/home" role="link">Home Link</a>
-    
-    <p>This file is used to test backup functionality.</p>
-</body>
-</html>

package/demo/backup-test2.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>No Backup Test</title>
-</head>
-<body>
-    <h1>No Backup Test File</h1>
-    
-    <img src="test2.jpg" alt="Test image 2" role="img" aria-label="Test image 2">
-    <a href="/about" role="link">About Link</a>
-</body>
-</html>

package/demo/backup-test3.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Explicit Backup Test</title>
-</head>
-<body>
-    <h1>Explicit Backup Test File</h1>
-    
-    <img src="test3.jpg" alt="Test image 3" role="img" aria-label="Test image 3">
-</body>
-</html>

package/demo/comprehensive-test.html.backup

@@ -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>