npm - gbu-accessibility-package - Versions diffs - 3.8.0 → 3.8.2 - Mend

gbu-accessibility-package 3.8.0 → 3.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/CHANGELOG.md +40 -0
package/README-vi.md +16 -10
package/README.md +3 -0
package/bin/fix.js +140 -0
package/bin/test.js +71 -0
package/cli.js +23 -1
package/lib/fixer.js +504 -104
package/package.json +4 -5
package/ENHANCED_ALT_FEATURES.md +0 -230
package/PACKAGE_SUMMARY.md +0 -191
package/demo/1mb-jpg-example-file.jpg +0 -0
package/demo/advanced-test.html +0 -44
package/demo/aria-label-test.html +0 -32
package/demo/broken-links-test.html +0 -41
package/demo/comprehensive-test.html +0 -21
package/demo/dead-code-test.css +0 -68
package/demo/dead-code-test.html +0 -36
package/demo/dead-code-test.js +0 -77
package/demo/demo.js +0 -73
package/demo/duplicate-roles.html +0 -45
package/demo/enhanced-alt-test.html +0 -150
package/demo/form-labels-test.html +0 -87
package/demo/heading-structure-test.html +0 -60
package/demo/heading-structure-test.html.backup +0 -60
package/demo/large-file-demo.css +0 -213
package/demo/nested-controls-test.html +0 -92
package/demo/sample.html +0 -47
package/demo/test-external-links.html +0 -26
package/demo/unused-files-test.html +0 -31
package/demo/unused-image.png +0 -1
package/demo/unused-page.html +0 -11
package/demo/unused-script.js +0 -12
package/demo/unused-style.css +0 -10
package/demo/very-large-file.js +0 -2
package/example.js +0 -121

package/demo/dead-code-test.html DELETED Viewed

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <title>Dead Code Test</title>
-    <link rel="stylesheet" href="dead-code-test.css">
-    <script src="dead-code-test.js"></script>
-</head>
-<body>
-    <!-- Uses .header and .content classes from CSS -->
-    <div class="header">
-        <h1>Dead Code Analysis Test</h1>
-    </div>
-    <div class="content">
-        <p>This page uses some CSS classes and JavaScript functions, but not all of them.</p>
-        <!-- Button that calls showAlert() function -->
-        <button onclick="showAlert()" role="button">Click me (uses showAlert function)</button>
-        <!-- Button with event handler -->
-        <button onclick="handleClick(event)" role="button">Handle Click</button>
-        <p>Run <code>gbu-a11y --dead-code</code> to analyze which CSS rules and JavaScript functions are unused.</p>
-        <!-- Note: The following are used:
-             CSS: .header, .content, h1, p (tag selectors)
-             JS: showAlert(), handleClick(), and their dependencies
-             The following should be detected as unused:
-             CSS: .sidebar, .popup, .modal-overlay, article, aside
-             JS: unusedFunction(), complexUnusedFunction(), unusedVariable, etc.
-        -->
-    </div>
-</body>
-</html>

package/demo/dead-code-test.js DELETED Viewed

@@ -1,77 +0,0 @@
-// JavaScript file with mixed used and unused code
-// Used function - called in HTML onclick
-function showAlert() {
-    alert('This function is used!');
-}
-// Used function - called by another function
-function helperFunction() {
-    return 'Helper function result';
-}
-// Used function - calls helperFunction
-function mainFunction() {
-    const result = helperFunction();
-    console.log(result);
-}
-// Unused function - never called anywhere
-function unusedFunction() {
-    console.log('This function is never called');
-    return false;
-}
-// Unused function - complex but never used
-function complexUnusedFunction(param1, param2) {
-    const calculations = param1 * param2 + Math.random();
-    if (calculations > 0.5) {
-        return 'High value';
-    } else {
-        return 'Low value';
-    }
-}
-// Used variable
-const usedVariable = 'This variable is used below';
-console.log(usedVariable);
-// Unused variable - declared but never used
-const unusedVariable = 'This variable is never used';
-// Unused variable with complex initialization
-const anotherUnusedVariable = {
-    property1: 'value1',
-    property2: 'value2',
-    method: function() {
-        return 'method result';
-    }
-};
-// Arrow function assigned to variable - used
-const usedArrowFunction = () => {
-    return 'Arrow function result';
-};
-// Call the used arrow function
-usedArrowFunction();
-// Arrow function assigned to variable - unused
-const unusedArrowFunction = (x, y) => {
-    return x + y;
-};
-// Event handler - should be detectable as used if referenced in HTML
-function handleClick(event) {
-    event.preventDefault();
-    console.log('Click handled');
-}
-// Initialize app - commonly used pattern
-function initApp() {
-    console.log('App initialized');
-    mainFunction();
-}
-// Call init - this makes initApp used
-initApp();

package/demo/demo.js DELETED Viewed

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

@@ -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" aria-label="Logo">
-    <img src="banner.jpg" alt="Banner" role="img" aria-label="Banner">
-    <!-- Links with duplicate roles -->
-    <a href="/home" role="link">Home</a>
-    <a href="/about" role="link">About</a>
-    <!-- Buttons with duplicate roles -->
-    <button onclick="submit()" role="button">Submit</button>
-    <button type="button" role="button">Click Me</button>
-    <!-- Mixed quotes -->
-    <div onclick="toggle()" role="button">Toggle</div>
-    <span onclick="show()" role='button'>Show</span>
-    <!-- Navigation with duplicates -->
-    <nav>
-        <ul class="nav-menu" role="menubar">
-            <li class="nav-item" role="menuitem">
-                <a href="/products" role="link">Products</a>
-            </li>
-            <li class="nav-item" role="menuitem">
-                <a href="/services" role="link">Services</a>
-            </li>
-        </ul>
-    </nav>
-    <!-- Complex duplicates -->
-    <article>
-        <h2>Article with Issues</h2>
-        <img src="article1.jpg" alt="Article Image" role="img" aria-label="Article Image">
-        <p>Some content...</p>
-        <a href="/read-more" role="link">Read More</a>
-    </article>
-</body>
-</html>

package/demo/enhanced-alt-test.html DELETED Viewed

@@ -1,150 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Enhanced Alt Attribute Test Cases</title>
-</head>
-<body>
-    <header>
-        <h1>Enhanced Alt Attribute Testing</h1>
-        <p>Test cases for diverse alt attribute checking and generation</p>
-    </header>
-    <main>
-        <!-- Test Case 1: Missing alt attribute -->
-        <section>
-            <h2>Company Logo</h2>
-            <p>Welcome to our innovative technology company</p>
-            <img src="company-logo.png" width="200" height="100" alt="Company Logo" role="img" aria-label="Company Logo">
-        </section>
-        <!-- Test Case 2: Empty alt attribute for content image -->
-        <section>
-            <h2>Product Showcase</h2>
-            <p>Our latest smartphone with advanced features</p>
-            <img src="smartphone-product.jpg" alt="Product Showcase" width="300" height="200" role="img" aria-label="Product Showcase">
-        </section>
-        <!-- Test Case 3: Alt text too long -->
-        <section>
-            <h2>Team Photo</h2>
-            <img src="team-photo.jpg" alt="This is a very long description of our amazing team photo showing all the wonderful people who work at our company including engineers, designers, managers, and other staff members working together in our beautiful modern office space" width="400" height="300" role="img" aria-label="This is a very long description of our amazing team photo showing all the wonderful people who work at our company including engineers, designers, managers, and other staff members working together in our beautiful modern office space">
-        </section>
-        <!-- Test Case 4: Alt text with redundant words -->
-        <section>
-            <h2>Office Environment</h2>
-            <img src="office.jpg" alt="Image of office picture showing workplace photo" width="350" height="250" role="img" aria-label="Image of office picture showing workplace photo">
-        </section>
-        <!-- Test Case 5: Generic alt text -->
-        <section>
-            <h2>Learn More</h2>
-            <p>Discover our services</p>
-            <a href="/services" role="link" aria-label="リンク" title="リンク">
-                <img src="arrow-right.png" alt="Click here" width="24" height="24" role="img" aria-label="Click here">
-            </a>
-        </section>
-        <!-- Test Case 6: Data visualization without proper description -->
-        <section>
-            <h2>Sales Performance</h2>
-            <p>Our sales increased by 25% this quarter</p>
-            <img src="sales-chart.png" alt="Chart" width="500" height="300" role="img" aria-label="Chart">
-        </section>
-        <!-- Test Case 7: Decorative image with content alt -->
-        <section>
-            <h2>Welcome Section</h2>
-            <img src="decorative-border.png" alt="Beautiful decorative border image" width="100%" height="20" role="img" aria-label="Beautiful decorative border image">
-            <p>Welcome to our website</p>
-        </section>
-        <!-- Test Case 8: Functional icon without proper description -->
-        <section>
-            <h2>Contact Us</h2>
-            <button onclick="openChat()" role="button" aria-label="ボタン" title="ボタン">
-                <img src="chat-icon.svg" alt="Icon" width="20" height="20" role="img" aria-label="Icon">
-            </button>
-        </section>
-        <!-- Test Case 9: Complex image needing detailed description -->
-        <section>
-            <h2>System Architecture</h2>
-            <p>Our microservices architecture overview</p>
-            <img src="architecture-diagram.png" alt="Diagram" width="600" height="400" role="img" aria-label="Diagram">
-        </section>
-        <!-- Test Case 10: Image with filename in alt text -->
-        <section>
-            <h2>Product Features</h2>
-            <img src="feature-screenshot.png" alt="feature-screenshot.png showing app interface" width="300" height="200" role="img" aria-label="feature-screenshot.png showing app interface">
-        </section>
-        <!-- Test Case 11: Logo without "logo" in alt text -->
-        <section>
-            <h2>Partners</h2>
-            <img src="partner-logo.png" alt="Microsoft" width="150" height="75" role="img" aria-label="Microsoft">
-        </section>
-        <!-- Test Case 12: Chart with some data context -->
-        <section>
-            <h2>Growth Metrics</h2>
-            <p>User growth from 1000 to 5000 users, showing 400% increase</p>
-            <img src="growth-chart.png" alt="User growth statistics" width="400" height="250" role="img" aria-label="User growth statistics">
-        </section>
-        <!-- Test Case 13: Image in figure with figcaption -->
-        <figure>
-            <img src="research-data.jpg" alt="Gallery" width="350" height="200" role="img" aria-label="Gallery">
-            <figcaption>Research findings from our latest study on user behavior patterns</figcaption>
-        </figure>
-        <!-- Test Case 14: Multiple images with similar generic alt text -->
-        <section>
-            <h2>Gallery</h2>
-            <img src="photo1.jpg" alt="Photo" width="200" height="150" role="img" aria-label="Photo">
-            <img src="photo2.jpg" alt="Photo" width="200" height="150" role="img" aria-label="Photo">
-            <img src="photo3.jpg" alt="Photo" width="200" height="150" role="img" aria-label="Photo">
-        </section>
-        <!-- Test Case 15: Image with inconsistent alt and aria-label -->
-        <section>
-            <h2>Navigation</h2>
-            <img src="home-icon.png" alt="Home" aria-label="Go to homepage" width="32" height="32" role="img">
-        </section>
-        <!-- Test Case 16: Food image in restaurant context -->
-        <section>
-            <h2>Today's Special</h2>
-            <p>Delicious authentic Japanese cuisine</p>
-            <img src="sushi-plate.jpg" alt="Todays Special" width="300" height="200" role="img" aria-label="Todays Special">
-        </section>
-        <!-- Test Case 17: Technology device in business context -->
-        <section>
-            <h2>Enterprise Solutions</h2>
-            <p>Professional laptop for business productivity</p>
-            <img src="business-laptop.jpg" width="250" height="180" alt="Enterprise Solutions" role="img" aria-label="Enterprise Solutions">
-        </section>
-        <!-- Test Case 18: Nature image in lifestyle context -->
-        <section>
-            <h2>Wellness Program</h2>
-            <p>Find peace and tranquility in nature</p>
-            <img src="peaceful-forest.jpg" alt="Wellness Program" width="400" height="250" role="img" aria-label="Wellness Program">
-        </section>
-    </main>
-    <footer>
-        <p>Enhanced Alt Attribute Test Cases - GBU Accessibility Tool</p>
-    </footer>
-    <script>
-        function openChat() {
-            alert('Chat opened!');
-        }
-    </script>
-</body>
-</html>

package/demo/form-labels-test.html DELETED Viewed

@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Form Labels Test - Accessibility Issues</title>
-</head>
-<body>
-    <h1>Form Labels Test Cases</h1>
-    <!-- Test Case 1: Input without any label -->
-    <div>
-        <input type="text" name="username" aria-label="Username" title="Username" id="username_input">
-    </div>
-    <!-- Test Case 2: Input with empty label -->
-    <div>
-        <label for="email"></label>
-        <input type="email" id="email" name="email" aria-label="Email" title="Email">
-    </div>
-    <!-- Test Case 3: Input without aria-label -->
-    <div>
-        <input type="password" name="password" placeholder="Enter password" aria-label="Enter password" title="Enter password" id="password_input">
-    </div>
-    <!-- Test Case 4: Input with invalid aria-labelledby -->
-    <div>
-        <input type="tel" name="phone" aria-labelledby="nonexistent-id" aria-label="Phone" title="Phone" id="phone_input">
-    </div>
-    <!-- Test Case 5: Input without title attribute -->
-    <div>
-        <input type="url" name="website" aria-label="Website" title="Website" id="website_input">
-    </div>
-    <!-- Test Case 6: Textarea without proper labeling -->
-    <div>
-        <textarea name="comments" aria-label="Comments" title="Comments" id="comments_input"></textarea>
-    </div>
-    <!-- Test Case 7: Select without proper labeling -->
-    <div>
-        <select name="country" aria-label="Country" title="Country" id="country_input">
-            <option value="">Choose country</option>
-            <option value="jp">Japan</option>
-            <option value="us">USA</option>
-        </select>
-    </div>
-    <!-- Test Case 8: Input with implicit label but empty text -->
-    <div>
-        <label><input type="checkbox" name="agree"></label>
-    </div>
-    <!-- Test Case 9: Input with aria-labelledby pointing to empty element -->
-    <div>
-        <span id="empty-label"></span>
-        <input type="number" name="age" aria-labelledby="empty-label" aria-label="Age" title="Age" id="age_input">
-    </div>
-    <!-- Test Case 10: Input without role override -->
-    <div>
-        <input type="range" name="volume" min="0" max="100" aria-label="Volume" title="Volume" id="volume_input">
-    </div>
-    <!-- Test Case 11: Multiple inputs without proper structure -->
-    <form>
-        <input type="text" name="firstname" aria-label="Firstname" title="Firstname" id="firstname_input">
-        <input type="text" name="lastname" aria-label="Lastname" title="Lastname" id="lastname_input">
-        <input type="email" name="user_email" aria-label="User email" title="User email" id="user_email_input">
-        <textarea name="message" aria-label="Message" title="Message" id="message_input"></textarea>
-        <select name="priority" aria-label="Priority" title="Priority" id="priority_input">
-            <option value="low">Low</option>
-            <option value="high">High</option>
-        </select>
-        <input type="submit" value="Submit">
-    </form>
-    <!-- Test Case 12: Inputs with only placeholder (not sufficient) -->
-    <div>
-        <input type="search" name="query" placeholder="Search..." aria-label="Search..." title="Search..." id="query_input">
-        <input type="date" name="birthdate" placeholder="Select date" aria-label="Select date" title="Select date" id="birthdate_input">
-        <input type="time" name="appointment" placeholder="Select time" aria-label="Select time" title="Select time" id="appointment_input">
-    </div>
-</body>
-</html>

package/demo/heading-structure-test.html DELETED Viewed

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Heading Structure Test - Accessibility Issues</title>
-</head>
-<body>
-    <h1>Heading Structure Test Cases</h1>
-    <!-- Test Case 1: Missing h1 (this will be converted from h2) -->
-    <h2>This should be h1</h2>
-    <p>Main content of the page</p>
-    <!-- Test Case 2: Multiple h1 elements -->
-    <h2>First h2 (should stay)</h2>
-    <h2>Second h2 (should become h2)</h2>
-    <h2>Third h2 (should become h2)</h2>
-    <!-- Test Case 3: Level skipping -->
-    <h2>Section heading</h2>
-    <h3>Subsection (skips h3 - should become h3)</h3>
-    <h4>Sub-subsection (skips h4, h4 - should become h4)</h4>
-    <!-- Test Case 4: Empty headings -->
-    <h3>Details should Service</h3>
-    <h4>dings with context</h4>
-    <h5>Subsection skips should</h5>
-    <!-- Test Case 5: Duplicate headings -->
-    <h2>Products (2)</h2>
-    <p>Some content about products</p>
-    <h2>Products</h2>
-    <p>More content about products</p>
-    <!-- Test Case 6: Proper structure (should not be changed) -->
-    <h2>Proper Section</h2>
-    <h3>Proper Subsection</h3>
-    <h4>Proper Sub-subsection</h4>
-    <p>Content with proper heading hierarchy</p>
-    <!-- Test Case 7: Complex nesting with issues -->
-    <h2>Services</h2>
-    <h3>Service 1 (should be h3)</h3>
-    <h4>Details (should be h4)</h4>
-    <h3>Service 2 (correct)</h3>
-    <h4>More details (should be h4)</h4>
-    <!-- Test Case 8: Empty headings with context -->
-    <div class="section">
-        <h3>Section heading Subsection</h3>
-        <p>This section talks about our company history and achievements.</p>
-    </div>
-    <div class="product-info">
-        <h4>ection heading Subsection</h4>
-        <p>Our flagship product offers innovative solutions for modern businesses.</p>
-    </div>
-</body>
-</html>

package/demo/heading-structure-test.html.backup DELETED Viewed

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Heading Structure Test - Accessibility Issues</title>
-</head>
-<body>
-    <h1>Heading Structure Test Cases</h1>
-    <!-- Test Case 1: Missing h1 (this will be converted from h2) -->
-    <h2>This should be h1</h2>
-    <p>Main content of the page</p>
-    <!-- Test Case 2: Multiple h1 elements -->
-    <h1>First h1 (should stay)</h1>
-    <h1>Second h1 (should become h2)</h1>
-    <h1>Third h1 (should become h2)</h1>
-    <!-- Test Case 3: Level skipping -->
-    <h2>Section heading</h2>
-    <h4>Subsection (skips h3 - should become h3)</h4>
-    <h6>Sub-subsection (skips h4, h5 - should become h4)</h6>
-    <!-- Test Case 4: Empty headings -->
-    <h3></h3>
-    <h4>   </h4>
-    <h5><span></span></h5>
-    <!-- Test Case 5: Duplicate headings -->
-    <h2>Products</h2>
-    <p>Some content about products</p>
-    <h2>Products</h2>
-    <p>More content about products</p>
-    <!-- Test Case 6: Proper structure (should not be changed) -->
-    <h2>Proper Section</h2>
-    <h3>Proper Subsection</h3>
-    <h4>Proper Sub-subsection</h4>
-    <p>Content with proper heading hierarchy</p>
-    <!-- Test Case 7: Complex nesting with issues -->
-    <h2>Services</h2>
-    <h5>Service 1 (should be h3)</h5>
-    <h6>Details (should be h4)</h6>
-    <h3>Service 2 (correct)</h3>
-    <h5>More details (should be h4)</h5>
-    <!-- Test Case 8: Empty headings with context -->
-    <div class="section">
-        <h3></h3>
-        <p>This section talks about our company history and achievements.</p>
-    </div>
-    <div class="product-info">
-        <h4>   </h4>
-        <p>Our flagship product offers innovative solutions for modern businesses.</p>
-    </div>
-</body>
-</html>