gbu-accessibility-package 1.0.0

package/cli.js

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+
+/**
+ * Accessibility Fixer CLI
+ * Command line interface for the accessibility fixer tool
+ */
+
+const AccessibilityFixer = require('./lib/fixer.js');
+const chalk = require('chalk');
+const path = require('path');
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const options = {
+  directory: '.',
+  language: 'ja',
+  backupFiles: true,
+  dryRun: false,
+  help: false
+};
+
+// Parse arguments
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+  
+  switch (arg) {
+    case '--help':
+    case '-h':
+      options.help = true;
+      break;
+    case '--directory':
+    case '-d':
+      options.directory = args[++i];
+      break;
+    case '--language':
+    case '-l':
+      options.language = args[++i];
+      break;
+    case '--no-backup':
+      options.backupFiles = false;
+      break;
+    case '--dry-run':
+      options.dryRun = true;
+      break;
+    default:
+      if (!arg.startsWith('-')) {
+        options.directory = arg;
+      }
+  }
+}
+
+// Show help
+if (options.help) {
+  console.log(chalk.blue(`
+🔧 Accessibility Fixer CLI
+
+Usage: node cli.js [options] [directory]
+
+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
+  -h, --help               Show this help message
+
+Examples:
+  node cli.js                          # Fix current directory
+  node cli.js ./src                    # Fix src directory
+  node cli.js -l en --dry-run ./dist   # Preview fixes for dist directory in English
+  node cli.js --no-backup ./public    # Fix without creating backups
+
+Features:
+  ✅ Alt attributes for images
+  ✅ Lang attributes for HTML
+  ✅ Role attributes for accessibility
+  ✅ Context-aware text generation
+  ✅ Automatic backups
+`));
+  process.exit(0);
+}
+
+// Main function
+async function main() {
+  console.log(chalk.blue('🚀 Starting Accessibility Fixer...'));
+  console.log(chalk.gray(`Directory: ${path.resolve(options.directory)}`));
+  console.log(chalk.gray(`Language: ${options.language}`));
+  console.log(chalk.gray(`Backup: ${options.backupFiles ? 'Yes' : 'No'}`));
+  console.log(chalk.gray(`Mode: ${options.dryRun ? 'Dry Run (Preview)' : 'Apply Changes'}`));
+  console.log('');
+
+  const fixer = new AccessibilityFixer({
+    language: options.language,
+    backupFiles: options.backupFiles,
+    dryRun: options.dryRun
+  });
+
+  try {
+    // Fix HTML lang attributes
+    console.log(chalk.yellow('📝 Step 1: Fixing HTML lang attributes...'));
+    const langResults = await fixer.fixHtmlLang(options.directory);
+    const langFixed = langResults.filter(r => r.status === 'fixed').length;
+    console.log(chalk.green(`✅ Fixed lang attributes in ${langFixed} files`));
+    console.log('');
+
+    // Fix alt attributes
+    console.log(chalk.yellow('🖼️  Step 2: Fixing alt attributes...'));
+    const altResults = await fixer.fixEmptyAltAttributes(options.directory);
+    const altFixed = altResults.filter(r => r.status === 'fixed').length;
+    const totalAltIssues = altResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+    console.log(chalk.green(`✅ Fixed alt attributes in ${altFixed} files (${totalAltIssues} issues)`));
+    console.log('');
+
+    // Fix role attributes
+    console.log(chalk.yellow('🎭 Step 3: Fixing role attributes...'));
+    const roleResults = await fixer.fixRoleAttributes(options.directory);
+    const roleFixed = roleResults.filter(r => r.status === 'fixed').length;
+    const totalRoleIssues = roleResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+    console.log(chalk.green(`✅ Fixed role attributes in ${roleFixed} files (${totalRoleIssues} issues)`));
+    console.log('');
+
+    // Summary
+    const totalFiles = new Set([
+      ...langResults.map(r => r.file),
+      ...altResults.map(r => r.file),
+      ...roleResults.map(r => r.file)
+    ]).size;
+
+    const totalFixed = new Set([
+      ...langResults.filter(r => r.status === 'fixed').map(r => r.file),
+      ...altResults.filter(r => r.status === 'fixed').map(r => r.file),
+      ...roleResults.filter(r => r.status === 'fixed').map(r => r.file)
+    ]).size;
+
+    const totalIssues = totalAltIssues + totalRoleIssues + langFixed;
+
+    console.log(chalk.blue('📊 Summary:'));
+    console.log(chalk.white(`   Total files scanned: ${totalFiles}`));
+    console.log(chalk.green(`   Files fixed: ${totalFixed}`));
+    console.log(chalk.yellow(`   Total issues resolved: ${totalIssues}`));
+    
+    if (options.dryRun) {
+      console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+    } else {
+      console.log(chalk.green('\n🎉 All accessibility fixes completed successfully!'));
+      if (options.backupFiles) {
+        console.log(chalk.gray('   Backup files created with .backup extension'));
+      }
+    }
+
+  } catch (error) {
+    console.error(chalk.red('❌ Error occurred:'), error.message);
+    process.exit(1);
+  }
+}
+
+// Run the CLI
+main();

package/demo/demo.js

@@ -0,0 +1,73 @@
+#!/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/sample.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Demo HTML for Accessibility Testing</title>
+</head>
+<body>
+    <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">
+    
+    <!-- Links without role -->
+    <a href="/home">Home</a>
+    <a href="/about">About Us</a>
+    
+    <!-- Buttons without role -->
+    <button onclick="submit()">Submit Form</button>
+    <button type="button">Regular Button</button>
+    
+    <!-- Clickable elements -->
+    <div onclick="navigate()" class="btn">Click Me</div>
+    <span onclick="toggle()">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>
+    </nav>
+    
+    <!-- More content -->
+    <main>
+        <article>
+            <h2>Article Title</h2>
+            <p>Some content here...</p>
+            <img src="article-image.jpg" alt="">
+        </article>
+    </main>
+    
+    <footer>
+        <p>&copy; 2024 Demo Company</p>
+    </footer>
+</body>
+</html>

package/demo/sample.html.backup

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Demo HTML for Accessibility Testing</title>
+</head>
+<body>
+    <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">
+    
+    <!-- Links without role -->
+    <a href="/home">Home</a>
+    <a href="/about">About Us</a>
+    
+    <!-- Buttons without role -->
+    <button onclick="submit()">Submit Form</button>
+    <button type="button">Regular Button</button>
+    
+    <!-- Clickable elements -->
+    <div onclick="navigate()" class="btn">Click Me</div>
+    <span onclick="toggle()">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>
+    </nav>
+    
+    <!-- More content -->
+    <main>
+        <article>
+            <h2>Article Title</h2>
+            <p>Some content here...</p>
+            <img src="article-image.jpg" alt="">
+        </article>
+    </main>
+    
+    <footer>
+        <p>&copy; 2024 Demo Company</p>
+    </footer>
+</body>
+</html>

package/example.js

@@ -0,0 +1,121 @@
+/**
+ * Example usage of Accessibility Fixer
+ * Demonstrates different ways to use the tool
+ */
+
+const AccessibilityFixer = require('./lib/fixer.js');
+const chalk = require('chalk');
+
+async function example1_BasicUsage() {
+  console.log(chalk.blue('\n📝 Example 1: Basic Usage'));
+  
+  const fixer = new AccessibilityFixer({
+    language: 'ja',
+    backupFiles: true,
+    dryRun: true  // Preview mode
+  });
+
+  // Fix all accessibility issues
+  await fixer.fixHtmlLang('./demo');
+  await fixer.fixEmptyAltAttributes('./demo');
+  await fixer.fixRoleAttributes('./demo');
+}
+
+async function example2_EnglishProject() {
+  console.log(chalk.blue('\n📝 Example 2: English Project'));
+  
+  const fixer = new AccessibilityFixer({
+    language: 'en',
+    backupFiles: false,
+    dryRun: false
+  });
+
+  const results = await fixer.fixRoleAttributes('./demo');
+  console.log(`Fixed ${results.filter(r => r.status === 'fixed').length} files`);
+}
+
+async function example3_StepByStep() {
+  console.log(chalk.blue('\n📝 Example 3: Step by Step'));
+  
+  const fixer = new AccessibilityFixer({
+    language: 'vi',
+    backupFiles: true,
+    dryRun: false
+  });
+
+  // Step 1: Fix lang attributes first
+  console.log('Step 1: Lang attributes...');
+  await fixer.fixHtmlLang('./demo');
+
+  // Step 2: Fix alt attributes
+  console.log('Step 2: Alt attributes...');
+  await fixer.fixEmptyAltAttributes('./demo');
+
+  // Step 3: Fix role attributes
+  console.log('Step 3: Role attributes...');
+  await fixer.fixRoleAttributes('./demo');
+
+  console.log('✅ All done!');
+}
+
+async function example4_CustomConfig() {
+  console.log(chalk.blue('\n📝 Example 4: Custom Configuration'));
+  
+  // Custom configuration for specific needs
+  const fixer = new AccessibilityFixer({
+    language: 'zh',
+    backupFiles: true,
+    dryRun: true
+  });
+
+  // Only fix specific issues
+  const altResults = await fixer.fixEmptyAltAttributes('./demo');
+  
+  // Analyze results
+  const fixedFiles = altResults.filter(r => r.status === 'fixed');
+  const totalIssues = altResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+  
+  console.log(`Found ${totalIssues} alt attribute issues in ${fixedFiles.length} files`);
+}
+
+async function example5_ErrorHandling() {
+  console.log(chalk.blue('\n📝 Example 5: Error Handling'));
+  
+  const fixer = new AccessibilityFixer({
+    language: 'ja',
+    backupFiles: true,
+    dryRun: false
+  });
+
+  try {
+    const results = await fixer.fixRoleAttributes('./nonexistent-directory');
+    console.log('Results:', results);
+  } catch (error) {
+    console.error(chalk.red('Error occurred:'), error.message);
+    // Handle error appropriately
+  }
+}
+
+// Run examples
+async function runExamples() {
+  console.log(chalk.green('🚀 Accessibility Fixer Examples\n'));
+  
+  await example1_BasicUsage();
+  await example2_EnglishProject();
+  await example3_StepByStep();
+  await example4_CustomConfig();
+  await example5_ErrorHandling();
+  
+  console.log(chalk.green('\n✅ All examples completed!'));
+}
+
+// Uncomment to run examples
+// runExamples();
+
+module.exports = {
+  example1_BasicUsage,
+  example2_EnglishProject,
+  example3_StepByStep,
+  example4_CustomConfig,
+  example5_ErrorHandling
+};

package/index.js

@@ -0,0 +1,8 @@
+/**
+ * GBU Accessibility Package
+ * Main entry point for the package
+ */
+
+const AccessibilityFixer = require('./lib/fixer.js');
+
+module.exports = AccessibilityFixer;

package/lib/enhancer.js

@@ -0,0 +1,163 @@
+/**
+ * Accessibility Enhancer
+ * JavaScript enhancements for better accessibility
+ */
+
+class AccessibilityEnhancer {
+  constructor(config = {}) {
+    this.config = {
+      language: config.language || 'ja',
+      skipLinkText: config.skipLinkText || 'メインコンテンツにスキップ',
+      ...config
+    };
+  }
+
+  // Generate JavaScript code for accessibility enhancements
+  generateEnhancementScript() {
+    return `
+/**
+ * Accessibility Enhancements
+ * Auto-generated by Accessibility Toolkit
+ */
+
+(function () {
+  'use strict';
+
+  // Add accessibility labels to slider pagination buttons
+  function addSliderAccessibilityLabels() {
+    setTimeout(function () {
+      // Find all pagination containers
+      const paginationContainers = document.querySelectorAll('.splide-custom-pagination, .pagination');
+
+      paginationContainers.forEach(function (container) {
+        const buttons = container.querySelectorAll('button');
+        buttons.forEach(function (button, index) {
+          const slideNumber = index + 1;
+          if (!button.getAttribute('aria-label')) {
+            button.setAttribute('aria-label', 'スライド' + slideNumber + 'を表示');
+          }
+        });
+      });
+
+      // Handle pagination buttons with data-index
+      const paginationButtons = document.querySelectorAll('[data-index]');
+      paginationButtons.forEach(function (button) {
+        const index = button.getAttribute('data-index');
+        const slideNumber = parseInt(index) + 1;
+        if (!button.getAttribute('aria-label')) {
+          button.setAttribute('aria-label', 'スライド' + slideNumber + 'を表示');
+        }
+      });
+
+      // Add role="img" and aria-label to picture elements in slides
+      const sliderPictures = document.querySelectorAll('.splide__slide picture, .slide picture');
+      sliderPictures.forEach(function (picture) {
+        if (!picture.getAttribute('role')) {
+          picture.setAttribute('role', 'img');
+        }
+        if (!picture.getAttribute('aria-label')) {
+          const slide = picture.closest('.splide__slide, .slide');
+          const heading = slide ? slide.querySelector('h4, h3, h2, h1') : null;
+          const altText = picture.querySelector('img') ? picture.querySelector('img').getAttribute('alt') : '';
+
+          let ariaLabel = '';
+          if (heading && heading.textContent) {
+            ariaLabel = heading.textContent + 'の画像';
+          } else if (altText) {
+            ariaLabel = altText + 'の画像';
+          } else {
+            ariaLabel = 'スライド画像';
+          }
+
+          picture.setAttribute('aria-label', ariaLabel);
+        }
+      });
+    }, 1000);
+  }
+
+  // Add skip link for keyboard navigation
+  function addSkipLink() {
+    const skipLink = document.createElement('a');
+    skipLink.href = '#main-content';
+    skipLink.textContent = '${this.config.skipLinkText}';
+    skipLink.className = 'skip-link sr-only';
+    skipLink.style.cssText = \`
+      position: absolute;
+      top: -40px;
+      left: 6px;
+      background: #000;
+      color: #fff;
+      padding: 8px;
+      text-decoration: none;
+      z-index: 1000;
+      border-radius: 4px;
+      font-size: 14px;
+    \`;
+
+    skipLink.addEventListener('focus', function () {
+      this.style.top = '6px';
+    });
+
+    skipLink.addEventListener('blur', function () {
+      this.style.top = '-40px';
+    });
+
+    document.body.insertBefore(skipLink, document.body.firstChild);
+  }
+
+  // Add main content ID for skip link target
+  function addMainContentId() {
+    const mainElement = document.querySelector('main');
+    if (mainElement && !mainElement.id) {
+      mainElement.id = 'main-content';
+    }
+  }
+
+  // Fix missing form labels
+  function fixFormLabels() {
+    const inputs = document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], textarea');
+    inputs.forEach(function(input) {
+      if (!input.getAttribute('aria-label') && !input.getAttribute('aria-labelledby')) {
+        const placeholder = input.getAttribute('placeholder');
+        if (placeholder) {
+          input.setAttribute('aria-label', placeholder);
+        }
+      }
+    });
+  }
+
+  // Initialize all enhancements
+  function init() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', function () {
+        addSkipLink();
+        addMainContentId();
+        addSliderAccessibilityLabels();
+        fixFormLabels();
+      });
+    } else {
+      addSkipLink();
+      addMainContentId();
+      addSliderAccessibilityLabels();
+      fixFormLabels();
+    }
+
+    // Run again after delay for dynamic content
+    setTimeout(addSliderAccessibilityLabels, 2000);
+  }
+
+  init();
+})();
+`;
+  }
+
+  // Save enhancement script to file
+  async saveEnhancementScript(outputPath) {
+    const fs = require('fs').promises;
+    const script = this.generateEnhancementScript();
+    await fs.writeFile(outputPath, script);
+    return outputPath;
+  }
+}
+
+module.exports = AccessibilityEnhancer;