npm - gbu-accessibility-package - Versions diffs - 1.5.0 → 1.6.0 - Mend

gbu-accessibility-package 1.5.0 → 1.6.0

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 (12) hide show

package/README.md +83 -36
package/cli.js +28 -30
package/demo/aria-label-test.html +32 -0
package/demo/backup-test.html +18 -0
package/demo/backup-test2.html +13 -0
package/demo/backup-test3.html +12 -0
package/lib/fixer.js +47 -8
package/package.json +3 -1
package/demo/duplicate-roles.html.backup +0 -45
package/demo/picture-test.html +0 -37
package/demo/picture-test.html.backup +0 -37
package/demo/sample.html.backup +0 -47

package/README.md CHANGED Viewed

@@ -9,6 +9,7 @@
 ## ✨ Features
 - 🖼️ **Smart Alt Text Generation** - Context-aware alt attributes for images
+- 🏷️ **Aria Label Support** - Automatic aria-label matching alt text
 - 🌐 **HTML Lang Attributes** - Automatic language attribute fixes
 - 🎭 **Role Attributes** - WCAG-compliant role attribute management
 - 🧹 **Duplicate Cleanup** - Remove duplicate role attributes
@@ -58,6 +59,7 @@ gbu-a11y [options] [directory/file]
 Options:
   -d, --directory <path>    Target directory (default: current directory)
   -l, --language <lang>     Language for lang attribute (default: ja)
+  --backup                 Create backup files (default: enabled)
   --no-backup              Don't create backup files
   --dry-run                Preview changes without applying
   --comprehensive, --all   Run all fixes including cleanup (recommended)
@@ -82,7 +84,7 @@ gbu-a11y -l en ./public
 # Individual fix types
 gbu-a11y --alt-only          # Only fix alt attributes
-gbu-a11y --lang-only         # Only fix lang attributes
+gbu-a11y --lang-only         # Only fix lang attributes
 gbu-a11y --role-only         # Only fix role attributes
 gbu-a11y --cleanup-only      # Only cleanup duplicates
@@ -90,28 +92,29 @@ gbu-a11y --cleanup-only      # Only cleanup duplicates
 gbu-a11y --alt-only --dry-run ./src    # Preview alt fixes only
 gbu-a11y --role-only -l en ./public    # Fix roles with English lang
-# Fix without creating backups
-gbu-a11y --no-backup ./dist
+# Backup options
+gbu-a11y --backup ./dist             # Explicitly enable backups (default)
+gbu-a11y --no-backup ./dist          # Disable backups for faster processing
 ```
 ## 🔧 Programmatic Usage
 ```javascript
-const AccessibilityFixer = require('gbu-accessibility-package');
+const AccessibilityFixer = require("gbu-accessibility-package");
 const fixer = new AccessibilityFixer({
-  language: 'en',
+  language: "en",
   backupFiles: true,
-  dryRun: false
+  dryRun: false,
 });
 // Fix all accessibility issues
 async function fixAccessibility() {
   try {
-    const results = await fixer.fixAllAccessibilityIssues('./src');
-    console.log('Fixed files:', results);
+    const results = await fixer.fixAllAccessibilityIssues("./src");
+    console.log("Fixed files:", results);
   } catch (error) {
-    console.error('Error:', error);
+    console.error("Error:", error);
   }
 }
@@ -121,14 +124,16 @@ fixAccessibility();
 ## 🎯 Fix Modes
 ### Individual Fix Options
 You can now fix specific accessibility issues individually:
 - `--alt-only` - Only fix alt attributes for images
-- `--lang-only` - Only fix HTML lang attributes
+- `--lang-only` - Only fix HTML lang attributes
 - `--role-only` - Only fix role attributes
 - `--cleanup-only` - Only cleanup duplicate role attributes
 ### Combined Modes
 - **Standard mode** (default) - Fixes alt, lang, and role attributes
 - `--comprehensive` - All fixes including duplicate cleanup
@@ -152,36 +157,41 @@ gbu-a11y --comprehensive
 ## 🔧 What Gets Fixed
 ### 1. Alt Attributes
 - **Missing alt attributes** → Adds contextual alt text
 - **Empty alt attributes** → Generates meaningful descriptions
 - **Context-aware generation** → Uses surrounding text, headings, captions
 ```html
 <!-- Before -->
-<img src="logo.png">
-<img src="chart.jpg" alt="">
+<img src="logo.png" />
+<img src="chart.jpg" alt="" />
 <!-- After -->
-<img src="logo.png" alt="ロゴ">
-<img src="chart.jpg" alt="グラフ">
+<img src="logo.png" alt="ロゴ" />
+<img src="chart.jpg" alt="グラフ" />
 ```
 ### 2. HTML Lang Attributes
 - **Missing lang attributes** → Adds specified language
 - **Empty lang attributes** → Sets proper language code
 ```html
 <!-- Before -->
 <html>
-<html lang="">
-<!-- After -->
-<html lang="ja">
-<html lang="ja">
+  <html lang="">
+    <!-- After -->
+    <html lang="ja">
+      <html lang="ja"></html>
+    </html>
+  </html>
+</html>
 ```
-### 3. Role Attributes
-- **Images** → `role="img"`
+### 3. Role Attributes & Aria Labels
+- **Images** → `role="img"` + `aria-label` (matching alt text)
 - **Picture elements** → Moves `role="img"` from `<picture>` to `<img>` inside
 - **Links** → `role="link"`
 - **Clickable elements** → `role="button"`
@@ -190,33 +200,48 @@ gbu-a11y --comprehensive
 ```html
 <!-- Before -->
-<img src="icon.png" alt="Icon">
+<img src="icon.png" alt="Icon" />
 <picture role="img">
-  <img src="photo.jpg" alt="Photo">
+  <img src="photo.jpg" alt="Photo" />
 </picture>
 <a href="/home">Home</a>
 <div class="btn-click">Click me</div>
 <!-- After -->
-<img src="icon.png" alt="Icon" role="img">
+<img src="icon.png" alt="Icon" role="img" aria-label="Icon" />
 <picture>
-  <img src="photo.jpg" alt="Photo" role="img">
+  <img src="photo.jpg" alt="Photo" role="img" aria-label="Photo" />
 </picture>
 <a href="/home" role="link">Home</a>
 <div class="btn-click" role="button">Click me</div>
 ```
-### 4. Duplicate Cleanup
+### 4. Aria Label Enhancement
+- **Automatic aria-label** → Adds `aria-label` matching `alt` text for images
+- **Preserves existing** → Won't override existing `aria-label` attributes
+- **Smart detection** → Only adds when `alt` text exists and is not empty
+```html
+<!-- Before -->
+<img src="chart.jpg" alt="Sales Chart" />
+<!-- After -->
+<img src="chart.jpg" alt="Sales Chart" role="img" aria-label="Sales Chart" />
+```
+### 5. Duplicate Cleanup
 - **Removes duplicate role attributes**
 - **Preserves first occurrence**
 - **Handles mixed quote styles**
 ```html
 <!-- Before -->
-<img src="test.jpg" role="img" role="img" alt="Test">
+<img src="test.jpg" role="img" role="img" alt="Test" />
 <!-- After -->
-<img src="test.jpg" role="img" alt="Test">
+<img src="test.jpg" role="img" alt="Test" />
 ```
 ## 🌟 Smart Alt Text Generation
@@ -224,8 +249,9 @@ gbu-a11y --comprehensive
 The package uses intelligent context analysis to generate meaningful alt text:
 ### Context Sources
 1. **Title attributes**
-2. **Aria-label attributes**
+2. **Aria-label attributes**
 3. **Definition terms (dt elements)**
 4. **Parent link text**
 5. **Nearby headings**
@@ -233,6 +259,7 @@ The package uses intelligent context analysis to generate meaningful alt text:
 7. **Surrounding text content**
 ### Fallback Patterns
 - `logo.png` → "ロゴ" (Logo)
 - `icon.svg` → "アイコン" (Icon)
 - `banner.jpg` → "バナー" (Banner)
@@ -242,6 +269,7 @@ The package uses intelligent context analysis to generate meaningful alt text:
 ## 📊 Output Examples
 ### Standard Mode
 ```
 🚀 Starting Accessibility Fixer...
 📝 Step 1: Fixing HTML lang attributes...
@@ -250,7 +278,7 @@ The package uses intelligent context analysis to generate meaningful alt text:
 🖼️ Step 2: Fixing alt attributes...
 ✅ Fixed alt attributes in 12 files (34 issues)
-🎭 Step 3: Fixing role attributes...
+🎭 Step 3: Fixing role attributes...
 ✅ Fixed role attributes in 8 files (67 issues)
 📊 Summary:
@@ -262,6 +290,7 @@ The package uses intelligent context analysis to generate meaningful alt text:
 ```
 ### Comprehensive Mode
 ```
 🎯 Running comprehensive accessibility fixes...
 📝 Step 1: HTML lang attributes...
@@ -272,14 +301,30 @@ The package uses intelligent context analysis to generate meaningful alt text:
 🎉 All accessibility fixes completed!
 📊 Final Summary:
    Total files scanned: 25
-   Files fixed: 15
+   Files fixed: 15
    Total issues resolved: 106
 ```
 ## 🔒 Safety Features
-- **Automatic backups** with `.backup` extension
-- **Dry run mode** for safe previewing
+### Backup Options
+- **Default behavior**: Creates `.backup` files automatically for safety
+- **Disable backups**: Use `--no-backup` for faster processing
+- **Explicit enable**: Use `--backup` to be explicit about backup creation
+```bash
+# Safe mode (default) - creates backups
+gbu-a11y --comprehensive
+# Fast mode - no backups
+gbu-a11y --no-backup --comprehensive
+# Explicit backup mode
+gbu-a11y --backup --comprehensive
+```
+### Other Safety Features
+- **Dry run mode** for safe previewing with `--dry-run`
 - **Non-destructive** - only adds missing attributes
 - **Duplicate prevention** - won't add existing attributes
 - **Error handling** - continues processing on individual file errors
@@ -287,6 +332,7 @@ The package uses intelligent context analysis to generate meaningful alt text:
 ## 🛠️ Configuration
 ### Package.json Scripts
 ```json
 {
   "scripts": {
@@ -295,19 +341,20 @@ The package uses intelligent context analysis to generate meaningful alt text:
     "a11y:comprehensive": "gbu-a11y --comprehensive",
     "a11y:cleanup": "gbu-a11y --cleanup-only",
     "a11y:alt": "gbu-a11y --alt-only",
-    "a11y:lang": "gbu-a11y --lang-only",
+    "a11y:lang": "gbu-a11y --lang-only",
     "a11y:role": "gbu-a11y --role-only"
   }
 }
 ```
 ### CI/CD Integration
 ```yaml
 # GitHub Actions example
 - name: Check Accessibility
   run: npx gbu-accessibility-package --dry-run
-- name: Fix Accessibility Issues
+- name: Fix Accessibility Issues
   run: npx gbu-accessibility-package --comprehensive
 ```
@@ -340,4 +387,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 ---
-Made with ❤️ by the GBU Team
+Made with ❤️ by the GBU Team

package/cli.js CHANGED Viewed

@@ -14,7 +14,7 @@ const args = process.argv.slice(2);
 const options = {
   directory: '.',
   language: 'ja',
-  backupFiles: true,
+  backupFiles: true, // Default to true for safety
   dryRun: false,
   help: false,
   cleanupOnly: false,
@@ -41,6 +41,9 @@ for (let i = 0; i < args.length; i++) {
     case '-l':
       options.language = args[++i];
       break;
+    case '--backup':
+      options.backupFiles = true;
+      break;
     case '--no-backup':
       options.backupFiles = false;
       break;
@@ -80,6 +83,7 @@ Usage: node cli.js [options] [directory]
 Options:
   -d, --directory <path>    Target directory (default: current directory)
   -l, --language <lang>     Language for lang attribute (default: ja)
+  --backup                 Create backup files (default: enabled)
   --no-backup              Don't create backup files
   --dry-run                Preview changes without applying
   --comprehensive, --all   Run all fixes including cleanup (recommended)
@@ -90,7 +94,7 @@ Options:
   -h, --help               Show this help message
 Examples:
-  node cli.js                          # Fix current directory (standard fixes)
+  node cli.js                          # Fix current directory (with backups)
   node cli.js --comprehensive          # Run all fixes including cleanup
   node cli.js --alt-only               # Only fix alt attributes
   node cli.js --lang-only              # Only fix lang attributes
@@ -99,6 +103,7 @@ Examples:
   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
+  node cli.js --backup --comprehensive # Explicitly enable backups with all fixes
 Features:
   ✅ Alt attributes for images
@@ -110,6 +115,22 @@ Features:
   process.exit(0);
 }
+// Helper function to show completion message with backup info
+function showCompletionMessage(options, mode = 'fixes') {
+  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🎉 ${mode} completed successfully!`));
+    if (options.backupFiles) {
+      console.log(chalk.gray('   📁 Backup files created with .backup extension'));
+      console.log(chalk.gray('   💡 Use --no-backup to disable backups in future runs'));
+    } else {
+      console.log(chalk.yellow('   ⚠️  No backup files created (--no-backup was used)'));
+      console.log(chalk.gray('   💡 Use --backup to enable backups for safety'));
+    }
+  }
+}
 // Main function
 async function main() {
   console.log(chalk.blue('🚀 Starting Accessibility Fixer...'));
@@ -143,11 +164,7 @@ async function main() {
       console.log(chalk.green(`\n✅ Cleaned duplicate roles in ${cleanupFixed} files`));
-      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🎉 Cleanup completed successfully!'));
-      }
+      showCompletionMessage(options, 'Cleanup');
       return;
     } else if (options.altOnly) {
@@ -159,11 +176,7 @@ async function main() {
       console.log(chalk.green(`\n✅ Fixed alt attributes in ${altFixed} files (${totalAltIssues} issues)`));
-      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🎉 Alt attribute fixes completed successfully!'));
-      }
+      showCompletionMessage(options, 'Alt attribute fixes');
       return;
     } else if (options.langOnly) {
@@ -174,11 +187,7 @@ async function main() {
       console.log(chalk.green(`\n✅ Fixed lang attributes in ${langFixed} files`));
-      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🎉 Lang attribute fixes completed successfully!'));
-      }
+      showCompletionMessage(options, 'Lang attribute fixes');
       return;
     } else if (options.roleOnly) {
@@ -190,11 +199,7 @@ async function main() {
       console.log(chalk.green(`\n✅ Fixed role attributes in ${roleFixed} files (${totalRoleIssues} issues)`));
-      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🎉 Role attribute fixes completed successfully!'));
-      }
+      showCompletionMessage(options, 'Role attribute fixes');
       return;
     }
@@ -242,14 +247,7 @@ async function main() {
     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'));
-      }
-    }
+    showCompletionMessage(options, 'All accessibility fixes');
     // Suggest cleanup if not comprehensive mode
     console.log(chalk.blue('\n💡 Pro tip: Use --comprehensive to include duplicate role cleanup!'));

package/demo/aria-label-test.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!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/backup-test.html ADDED Viewed

@@ -0,0 +1,18 @@
+<!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 ADDED Viewed

@@ -0,0 +1,13 @@
+<!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 ADDED Viewed

@@ -0,0 +1,12 @@
+<!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/lib/fixer.js CHANGED Viewed

@@ -563,7 +563,7 @@ class AccessibilityFixer {
       }
     ];
-    // Check for images that need role="img"
+    // Check for images that need role="img" and aria-label
     const images = content.match(/<img[^>]*>/gi) || [];
     images.forEach((img, index) => {
       if (!img.includes('role=')) {
@@ -573,6 +573,18 @@ class AccessibilityFixer {
           element: img.substring(0, 100) + '...'
         });
       }
+      // Check for missing aria-label when alt exists
+      const hasAriaLabel = /aria-label\s*=/i.test(img);
+      const altMatch = img.match(/alt\s*=\s*["']([^"']*)["']/i);
+      if (!hasAriaLabel && altMatch && altMatch[1].trim()) {
+        issues.push({
+          type: '🏷️ Missing aria-label',
+          description: `Image ${index + 1} should have aria-label matching alt text`,
+          element: img.substring(0, 100) + '...'
+        });
+      }
     });
     // Check for button elements with onclick that need role
@@ -676,7 +688,17 @@ class AccessibilityFixer {
           const pictureWithoutRole = pictureBlock.replace(/\s*role\s*=\s*["']img["']/i, '');
           // Add role="img" to img element
-          const imgWithRole = imgTag.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
+          let imgWithRole = imgTag.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
+          // Also add aria-label if img has alt but no aria-label
+          const imgHasAriaLabel = /aria-label\s*=/i.test(imgWithRole);
+          const altMatch = imgWithRole.match(/alt\s*=\s*["']([^"']*)["']/i);
+          if (!imgHasAriaLabel && altMatch && altMatch[1].trim()) {
+            const altText = altMatch[1].trim();
+            imgWithRole = imgWithRole.replace(/(<img[^>]*?)(\s*>)/i, `$1 aria-label="${altText}"$2`);
+            console.log(chalk.yellow(`  🏷️ Added aria-label="${altText}" to moved img element`));
+          }
           // Replace the img in the modified picture block
           const updatedPictureBlock = pictureWithoutRole.replace(imgTag, imgWithRole);
@@ -698,16 +720,33 @@ class AccessibilityFixer {
     // Fix picture elements with img children - move role from picture to img
     fixed = this.fixPictureImgRoles(fixed);
-    // Fix all images - add role="img" (only if no role exists)
+    // Fix all images - add role="img" and aria-label
     fixed = fixed.replace(
       /<img([^>]*>)/gi,
-      (match, fullTag) => {
+      (match) => {
+        let updatedImg = match;
+        let hasChanges = false;
         // Check if role attribute already exists
-        if (/role\s*=/i.test(match)) {
-          return match; // Return unchanged if role already exists
+        if (!/role\s*=/i.test(match)) {
+          updatedImg = updatedImg.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
+          console.log(chalk.yellow(`  🖼️ Added role="img" to image element`));
+          hasChanges = true;
         }
-        console.log(chalk.yellow(`  🖼️ Added role="img" to image element`));
-        return match.replace(/(<img[^>]*?)(\s*>)/i, '$1 role="img"$2');
+        // Check if aria-label already exists
+        if (!/aria-label\s*=/i.test(match)) {
+          // Extract alt text to use for aria-label
+          const altMatch = match.match(/alt\s*=\s*["']([^"']*)["']/i);
+          if (altMatch && altMatch[1].trim()) {
+            const altText = altMatch[1].trim();
+            updatedImg = updatedImg.replace(/(<img[^>]*?)(\s*>)/i, `$1 aria-label="${altText}"$2`);
+            console.log(chalk.yellow(`  🏷️ Added aria-label="${altText}" to image element`));
+            hasChanges = true;
+          }
+        }
+        return updatedImg;
       }
     );

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Automated accessibility fixes for HTML files - Alt attributes, Lang attributes, Role attributes. Smart context-aware alt text generation with individual fix options and comprehensive role attribute management.",
   "main": "index.js",
   "bin": {
@@ -16,6 +16,8 @@
     "lang-only": "node cli.js --lang-only",
     "role-only": "node cli.js --role-only",
     "cleanup-only": "node cli.js --cleanup-only",
+    "no-backup": "node cli.js --no-backup",
+    "cleanup-backups": "find . -name '*.backup' -type f -delete",
     "test": "node test-package.js",
     "demo": "node cli.js --dry-run demo",
     "prepublishOnly": "npm run test"

package/demo/duplicate-roles.html.backup 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" role="img" role="img" role="img">
-    <img src="banner.jpg" alt="Banner" 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">Home</a>
-    <a href="/about" 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">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">Toggle</div>
-    <span onclick="show()" 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">
-            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem" role="menuitem">
-                <a href="/products" 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">
-                <a href="/services" 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">
-        <p>Some content...</p>
-        <a href="/read-more" role="link" role="link" role="link" role="link" role="link" role="link">Read More</a>
-    </article>
-</body>
-</html>

package/demo/picture-test.html DELETED Viewed

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Picture Role Test</title>
-</head>
-<body>
-    <h1>Picture Role Test Cases</h1>
-    <!-- Test case 1: Picture with role="img" containing img without role -->
-    <picture>
-        <source srcset="image.webp" type="image/webp">
-        <img src="image.jpg" alt="Test image" role="img">
-    </picture>
-    <!-- Test case 2: Picture with role="img" containing img with role (should not change) -->
-    <picture role="img">
-        <source srcset="image2.webp" type="image/webp">
-        <img src="image2.jpg" alt="Test image 2" role="img">
-    </picture>
-    <!-- Test case 3: Picture without role containing img without role (should add role to img) -->
-    <picture>
-        <source srcset="image3.webp" type="image/webp">
-        <img src="image3.jpg" alt="Test image 3" role="img">
-    </picture>
-    <!-- Test case 4: Regular img without role (should add role) -->
-    <img src="regular.jpg" alt="Regular image" role="img">
-    <!-- Test case 5: Picture with role="img" but no img inside (should not change) -->
-    <picture role="img">
-        <source srcset="video.webp" type="image/webp">
-    </picture>
-</body>
-</html>

package/demo/picture-test.html.backup DELETED Viewed

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Picture Role Test</title>
-</head>
-<body>
-    <h1>Picture Role Test Cases</h1>
-    <!-- Test case 1: Picture with role="img" containing img without role -->
-    <picture role="img">
-        <source srcset="image.webp" type="image/webp">
-        <img src="image.jpg" alt="Test image">
-    </picture>
-    <!-- Test case 2: Picture with role="img" containing img with role (should not change) -->
-    <picture role="img">
-        <source srcset="image2.webp" type="image/webp">
-        <img src="image2.jpg" alt="Test image 2" role="img">
-    </picture>
-    <!-- Test case 3: Picture without role containing img without role (should add role to img) -->
-    <picture>
-        <source srcset="image3.webp" type="image/webp">
-        <img src="image3.jpg" alt="Test image 3">
-    </picture>
-    <!-- Test case 4: Regular img without role (should add role) -->
-    <img src="regular.jpg" alt="Regular image">
-    <!-- Test case 5: Picture with role="img" but no img inside (should not change) -->
-    <picture role="img">
-        <source srcset="video.webp" type="image/webp">
-    </picture>
-</body>
-</html>

package/demo/sample.html.backup DELETED Viewed

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <title>Demo HTML for Accessibility Testing</title>
-</head>
-<body>
-    <h1>Sample Website</h1>
-    <!-- Images without alt or role -->
-    <img src="logo.png" alt="Sample Website" role="img" role="img" role="img">
-    <img src="banner.jpg" alt="Sample Website" role="img" role="img" role="img">
-    <img src="icon.svg" alt="Home Icon" role="img" role="img" role="img">
-    <!-- Links without role -->
-    <a href="/home" role="link" role="link" role="link">Home</a>
-    <a href="/about" role="link" role="link" role="link">About Us</a>
-    <!-- Buttons without role -->
-    <button onclick="submit()" role="button" role="button" role="button">Submit Form</button>
-    <button type="button">Regular Button</button>
-    <!-- Clickable elements -->
-    <div onclick="navigate()" class="btn" role="button" role="button" role="button" role="button" role="button" role="button">Click Me</div>
-    <span onclick="toggle()" role="button" role="button" role="button">Toggle</span>
-    <!-- Navigation -->
-    <nav>
-        <ul class="nav-menu" role="menubar" role="menubar" role="menubar">
-            <li class="nav-item"><a href="/products" role="link" role="link" role="link">Products</a></li>
-            <li class="nav-item"><a href="/services" role="link" role="link" role="link">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 Title" role="img" role="img" role="img">
-        </article>
-    </main>
-    <footer>
-        <p>&copy; 2024 Demo Company</p>
-    </footer>
-</body>
-</html>