gbu-accessibility-package 1.0.0 → 1.1.0

package/README.md

@@ -14,9 +14,11 @@ Một công cụ tự động sửa các vấn đề accessibility phổ biến
   - `role="link"` cho thẻ `<a>`
   - `role="button"` cho elements có onclick
   - `role="menubar"` và `role="menuitem"` cho navigation lists
+- ✅ **Duplicate Cleanup**: Tự động xóa duplicate role attributes
 - ✅ **Context-aware**: Phân tích nội dung xung quanh để tạo alt text phù hợp
 - ✅ **Backup tự động**: Tạo backup files trước khi sửa
 - ✅ **Dry run mode**: Xem preview trước khi apply changes
+- ✅ **Comprehensive mode**: Chạy tất cả fixes trong một lần
 
 ## 📦 Cài đặt
 
@@ -61,8 +63,9 @@ npx gbu-a11y [options] [directory]
 # Hoặc thêm vào package.json scripts
 {
   "scripts": {
-    "fix-a11y": "gbu-a11y",
-    "preview-a11y": "gbu-a11y --dry-run"
+    "fix-a11y": "gbu-a11y --comprehensive",
+    "preview-a11y": "gbu-a11y --comprehensive --dry-run",
+    "cleanup-roles": "gbu-a11y --cleanup-only"
   }
 }
 ```
@@ -163,7 +166,21 @@ Thêm role attributes cho các elements
 const results = await fixer.fixRoleAttributes('./src');
 ```
 
-### 4. addMainLandmarks(directory)
+### 4. cleanupDuplicateRoles(directory)
+Xóa duplicate role attributes
+
+```javascript
+const results = await fixer.cleanupDuplicateRoles('./src');
+```
+
+### 5. fixAllAccessibilityIssues(directory)
+Chạy tất cả fixes bao gồm cleanup (khuyến nghị)
+
+```javascript
+const results = await fixer.fixAllAccessibilityIssues('./src');
+```
+
+### 6. addMainLandmarks(directory)
 Phát hiện và suggest main landmarks
 
 ```javascript
@@ -196,6 +213,19 @@ const suggestions = await fixer.addMainLandmarks('./src');
 <button onclick="submit()" role="button">Submit</button>
 ```
 
+### Duplicate Cleanup
+```html
+<!-- Trước -->
+<img src="logo.png" alt="Logo" role="img" role="img" role="img">
+<a href="/home" role="link" role="link">Home</a>
+<button onclick="click()" role="button" role="button">Click</button>
+
+<!-- Sau -->
+<img src="logo.png" alt="Logo" role="img">
+<a href="/home" role="link">Home</a>
+<button onclick="click()" role="button">Click</button>
+```
+
 ### Lang Attributes
 ```html
 <!-- Trước -->

package/cli.js

@@ -16,7 +16,9 @@ const options = {
   language: 'ja',
   backupFiles: true,
   dryRun: false,
-  help: false
+  help: false,
+  cleanupOnly: false,
+  comprehensive: false
 };
 
 // Parse arguments
@@ -42,6 +44,13 @@ for (let i = 0; i < args.length; i++) {
     case '--dry-run':
       options.dryRun = true;
       break;
+    case '--cleanup-only':
+      options.cleanupOnly = true;
+      break;
+    case '--comprehensive':
+    case '--all':
+      options.comprehensive = true;
+      break;
     default:
       if (!arg.startsWith('-')) {
         options.directory = arg;
@@ -61,10 +70,14 @@ Options:
   -l, --language <lang>     Language for lang attribute (default: ja)
   --no-backup              Don't create backup files
   --dry-run                Preview changes without applying
+  --cleanup-only           Only cleanup duplicate role attributes
+  --comprehensive, --all   Run all fixes including cleanup (recommended)
   -h, --help               Show this help message
 
 Examples:
-  node cli.js                          # Fix current directory
+  node cli.js                          # Fix current directory (standard fixes)
+  node cli.js --comprehensive          # Run all fixes including cleanup
+  node cli.js --cleanup-only           # Only cleanup duplicate roles
   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
@@ -95,6 +108,32 @@ async function main() {
   });
 
   try {
+    // Handle different modes
+    if (options.comprehensive) {
+      // Run comprehensive fix (all fixes including cleanup)
+      console.log(chalk.blue('🎯 Running comprehensive accessibility fixes...'));
+      const results = await fixer.fixAllAccessibilityIssues(options.directory);
+      
+      // Results already logged in the method
+      return;
+      
+    } else if (options.cleanupOnly) {
+      // Only cleanup duplicate roles
+      console.log(chalk.blue('🧹 Running cleanup for duplicate role attributes...'));
+      const cleanupResults = await fixer.cleanupDuplicateRoles(options.directory);
+      const cleanupFixed = cleanupResults.filter(r => r.status === 'fixed').length;
+      
+      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!'));
+      }
+      return;
+    }
+
+    // Standard mode - run individual fixes
     // Fix HTML lang attributes
     console.log(chalk.yellow('📝 Step 1: Fixing HTML lang attributes...'));
     const langResults = await fixer.fixHtmlLang(options.directory);
@@ -146,6 +185,9 @@ async function main() {
         console.log(chalk.gray('   Backup files created with .backup extension'));
       }
     }
+    
+    // Suggest cleanup if not comprehensive mode
+    console.log(chalk.blue('\n💡 Pro tip: Use --comprehensive to include duplicate role cleanup!'));
 
   } catch (error) {
     console.error(chalk.red('❌ Error occurred:'), error.message);

package/demo/duplicate-roles.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img">
+    
+    <!-- Links with duplicate roles -->
+    <a href="/home" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link">About</a>
+    
+    <!-- Buttons with duplicate roles -->
+    <button onclick="submit()" 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'>Toggle</div>
+    <span onclick="show()" role='button' role="button">Show</span>
+    
+    <!-- Navigation with duplicates -->
+    <nav>
+        <ul class="nav-menu" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem" role="menuitem">
+                <a href="/products" role="link" role="link">Products</a>
+            </li>
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/services" 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">
+        <p>Some content...</p>
+        <a href="/read-more" role="link" role="link" role="link" role="link">Read More</a>
+    </article>
+</body>
+</html>

package/demo/duplicate-roles.html.backup

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <img src="banner.jpg" alt="Banner" role="img" role="img" role="img">
+    
+    <!-- Links with duplicate roles -->
+    <a href="/home" role="link" role="link">Home</a>
+    <a href="/about" role="link" role="link" role="link">About</a>
+    
+    <!-- Buttons with duplicate roles -->
+    <button onclick="submit()" 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'>Toggle</div>
+    <span onclick="show()" role='button' role="button">Show</span>
+    
+    <!-- Navigation with duplicates -->
+    <nav>
+        <ul class="nav-menu" role="menubar" role="menubar">
+            <li class="nav-item" role="menuitem" role="menuitem">
+                <a href="/products" role="link" role="link">Products</a>
+            </li>
+            <li class="nav-item" role="menuitem" role="menuitem" role="menuitem">
+                <a href="/services" 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">
+        <p>Some content...</p>
+        <a href="/read-more" role="link" role="link" role="link" role="link">Read More</a>
+    </article>
+</body>
+</html>

package/lib/fixer.js

@@ -739,9 +739,153 @@ class AccessibilityFixer {
     return candidates;
   }
 
+  async cleanupDuplicateRoles(directory = '.') {
+    console.log(chalk.blue('🧹 Cleaning up duplicate role attributes...'));
+    
+    const htmlFiles = await this.findHtmlFiles(directory);
+    const results = [];
+    let totalFixedFiles = 0;
+    
+    for (const file of htmlFiles) {
+      try {
+        const content = await fs.readFile(file, 'utf8');
+        const fixed = this.cleanupDuplicateRolesInContent(content);
+        
+        if (fixed !== content) {
+          if (this.config.backupFiles) {
+            await fs.writeFile(`${file}.backup`, content);
+          }
+          
+          if (!this.config.dryRun) {
+            await fs.writeFile(file, fixed);
+          }
+          
+          console.log(chalk.green(`✅ Cleaned duplicate roles in: ${file}`));
+          results.push({ file, status: 'fixed' });
+          totalFixedFiles++;
+        } else {
+          results.push({ file, status: 'no-change' });
+        }
+      } catch (error) {
+        console.error(chalk.red(`❌ Error processing ${file}: ${error.message}`));
+        results.push({ file, status: 'error', error: error.message });
+      }
+    }
+    
+    console.log(chalk.blue(`\n📊 Summary: Cleaned duplicate roles in ${totalFixedFiles} files`));
+    return results;
+  }
+
+  cleanupDuplicateRolesInContent(content) {
+    let fixed = content;
+    let changesMade = false;
+    
+    // Pattern to match duplicate role attributes
+    // Matches: role="value" role="value" or role="value" role="value" role="value" etc.
+    const duplicateRolePattern = /(\s+role\s*=\s*["']([^"']+)["'])(\s+role\s*=\s*["']\2["'])+/gi;
+    
+    fixed = fixed.replace(duplicateRolePattern, (match, firstRole, roleValue) => {
+      changesMade = true;
+      console.log(chalk.yellow(`  🧹 Removed duplicate role="${roleValue}" attributes`));
+      return firstRole; // Keep only the first occurrence
+    });
+    
+    // Also handle cases where roles have different quotes but same value
+    // e.g., role="button" role='button'
+    const mixedQuotePattern = /(\s+role\s*=\s*["']([^"']+)["'])(\s+role\s*=\s*['"]?\2['"]?)+/gi;
+    
+    fixed = fixed.replace(mixedQuotePattern, (match, firstRole, roleValue) => {
+      if (!changesMade) { // Only log if not already logged above
+        changesMade = true;
+        console.log(chalk.yellow(`  🧹 Removed duplicate role="${roleValue}" attributes (mixed quotes)`));
+      }
+      return firstRole;
+    });
+    
+    return fixed;
+  }
+
+  async fixAllAccessibilityIssues(directory = '.') {
+    console.log(chalk.blue('🚀 Starting comprehensive accessibility fixes...'));
+    
+    const results = {
+      lang: [],
+      alt: [],
+      roles: [],
+      cleanup: []
+    };
+    
+    try {
+      // Step 1: Fix lang attributes
+      console.log(chalk.yellow('\n📝 Step 1: HTML lang attributes...'));
+      results.lang = await this.fixHtmlLang(directory);
+      
+      // Step 2: Fix alt attributes
+      console.log(chalk.yellow('\n🖼️ Step 2: Alt attributes...'));
+      results.alt = await this.fixEmptyAltAttributes(directory);
+      
+      // Step 3: Fix role attributes
+      console.log(chalk.yellow('\n🎭 Step 3: Role attributes...'));
+      results.roles = await this.fixRoleAttributes(directory);
+      
+      // Step 4: Cleanup duplicate roles
+      console.log(chalk.yellow('\n🧹 Step 4: Cleanup duplicate roles...'));
+      results.cleanup = await this.cleanupDuplicateRoles(directory);
+      
+      // Summary
+      const totalFiles = new Set([
+        ...results.lang.map(r => r.file),
+        ...results.alt.map(r => r.file),
+        ...results.roles.map(r => r.file),
+        ...results.cleanup.map(r => r.file)
+      ]).size;
+      
+      const totalFixed = new Set([
+        ...results.lang.filter(r => r.status === 'fixed').map(r => r.file),
+        ...results.alt.filter(r => r.status === 'fixed').map(r => r.file),
+        ...results.roles.filter(r => r.status === 'fixed').map(r => r.file),
+        ...results.cleanup.filter(r => r.status === 'fixed').map(r => r.file)
+      ]).size;
+      
+      const totalIssues = 
+        results.lang.filter(r => r.status === 'fixed').length +
+        results.alt.reduce((sum, r) => sum + (r.issues || 0), 0) +
+        results.roles.reduce((sum, r) => sum + (r.issues || 0), 0) +
+        results.cleanup.filter(r => r.status === 'fixed').length;
+      
+      console.log(chalk.green('\n🎉 All accessibility fixes completed!'));
+      console.log(chalk.blue('📊 Final 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 (this.config.dryRun) {
+        console.log(chalk.cyan('\n💡 This was a dry run. Use without --dry-run to apply changes.'));
+      }
+      
+      return results;
+      
+    } catch (error) {
+      console.error(chalk.red('❌ Error during comprehensive fix:'), error.message);
+      throw error;
+    }
+  }
+
   async findHtmlFiles(directory) {
     const files = [];
     
+    // Check if the path is a file or directory
+    const stat = await fs.stat(directory);
+    
+    if (stat.isFile()) {
+      // If it's a file, check if it's HTML
+      if (directory.endsWith('.html')) {
+        files.push(directory);
+      }
+      return files;
+    }
+    
+    // If it's a directory, scan recursively
     async function scan(dir) {
       const entries = await fs.readdir(dir, { withFileTypes: true });
       

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbu-accessibility-package",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Automated accessibility fixes for HTML files - Alt attributes, Lang attributes, Role attributes. Smart context-aware alt text generation and comprehensive role attribute management.",
   "main": "index.js",
   "bin": {