gbu-accessibility-package 3.2.1 → 3.4.0

package/QUICK_START.md

@@ -15,6 +15,22 @@ npm install gbu-accessibility-package
 gbu-a11y
 ```
 
+## 🔄 Cài đặt lại / Cập nhật
+
+```bash
+# Gỡ cài đặt cũ
+npm uninstall -g gbu-accessibility-package
+
+# Xóa cache
+npm cache clean --force
+
+# Cài đặt phiên bản mới nhất
+npm install -g gbu-accessibility-package@latest
+
+# Kiểm tra version
+gbu-a11y --version
+```
+
 ## 🎯 Sử dụng cơ bản
 
 ### Cách 1: CLI (Đơn giản nhất)
@@ -115,9 +131,31 @@ gbu-a11y --dry-run
 
 **Lỗi "Cannot find module"**
 ```bash
+# Cài đặt lại
+npm uninstall -g gbu-accessibility-package
+npm cache clean --force
 npm install -g gbu-accessibility-package
 ```
 
+**Lỗi permission (macOS/Linux)**
+```bash
+sudo npm install -g gbu-accessibility-package
+```
+
+**Package không update**
+```bash
+# Force update
+npm cache clean --force
+npm install -g gbu-accessibility-package@latest --force
+```
+
+**Kiểm tra cài đặt**
+```bash
+which gbu-a11y
+npm list -g gbu-accessibility-package
+gbu-a11y --version
+```
+
 **Duplicate attributes**
 - Tool tự động tránh duplicate
 - Nếu có, chạy lại tool sẽ tự clean up

package/README-vi.md

@@ -52,6 +52,47 @@ npm install -g gbu-accessibility-package
 npm install gbu-accessibility-package
 ```
 
+### Gỡ cài đặt và Cài đặt lại
+
+```bash
+# Gỡ cài đặt package global
+npm uninstall -g gbu-accessibility-package
+
+# Gỡ cài đặt package local
+npm uninstall gbu-accessibility-package
+
+# Xóa cache npm (khuyến nghị khi có vấn đề)
+npm cache clean --force
+
+# Cài đặt lại phiên bản mới nhất
+npm install -g gbu-accessibility-package@latest
+
+# Kiểm tra phiên bản đã cài đặt
+npm list -g gbu-accessibility-package
+gbu-a11y --version
+
+# Cài đặt phiên bản cụ thể
+npm install -g gbu-accessibility-package@3.2.1
+```
+
+### Khắc phục sự cố cài đặt
+
+```bash
+# Nếu gặp lỗi permission (macOS/Linux)
+sudo npm install -g gbu-accessibility-package
+
+# Nếu gặp lỗi cache
+npm cache clean --force
+npm install -g gbu-accessibility-package --force
+
+# Kiểm tra cài đặt
+which gbu-a11y
+gbu-a11y --help
+
+# Cập nhật lên phiên bản mới nhất
+npm update -g gbu-accessibility-package
+```
+
 ### Sử dụng cơ bản
 
 ```bash
@@ -277,6 +318,50 @@ console.log("Hoàn thành sửa lỗi với enhanced features:", results);
 - **URL không hợp lệ** → Phát hiện định dạng URL sai
 - **Liên kết chậm** → Cảnh báo timeout và phản hồi chậm
 
+## 🔧 Quản lý Package
+
+### Kiểm tra thông tin package
+
+```bash
+# Xem version hiện tại
+gbu-a11y --version
+npm list -g gbu-accessibility-package
+
+# Xem thông tin package
+npm info gbu-accessibility-package
+
+# Kiểm tra package đã cài đặt
+which gbu-a11y
+npm list -g | grep gbu-accessibility-package
+```
+
+### Cập nhật package
+
+```bash
+# Kiểm tra version mới
+npm outdated -g gbu-accessibility-package
+
+# Cập nhật lên version mới nhất
+npm update -g gbu-accessibility-package
+
+# Hoặc cài đặt lại version mới
+npm uninstall -g gbu-accessibility-package
+npm install -g gbu-accessibility-package@latest
+```
+
+### Quản lý cache
+
+```bash
+# Xem cache info
+npm cache verify
+
+# Xóa cache (khi có vấn đề)
+npm cache clean --force
+
+# Xem cache location
+npm config get cache
+```
+
 ## 🧪 Kiểm tra và Demo
 
 ```bash

package/README.md

@@ -49,6 +49,47 @@ npm install -g gbu-accessibility-package
 npm install gbu-accessibility-package
 ```
 
+### Uninstall and Reinstall
+
+```bash
+# Uninstall global package
+npm uninstall -g gbu-accessibility-package
+
+# Uninstall local package
+npm uninstall gbu-accessibility-package
+
+# Clear npm cache (recommended when having issues)
+npm cache clean --force
+
+# Reinstall latest version
+npm install -g gbu-accessibility-package@latest
+
+# Check installed version
+npm list -g gbu-accessibility-package
+gbu-a11y --version
+
+# Install specific version
+npm install -g gbu-accessibility-package@3.2.1
+```
+
+### Installation Troubleshooting
+
+```bash
+# If permission errors (macOS/Linux)
+sudo npm install -g gbu-accessibility-package
+
+# If cache issues
+npm cache clean --force
+npm install -g gbu-accessibility-package --force
+
+# Verify installation
+which gbu-a11y
+gbu-a11y --help
+
+# Update to latest version
+npm update -g gbu-accessibility-package
+```
+
 ### Basic Usage
 
 ```bash
@@ -266,6 +307,47 @@ console.log('Accessibility fixes completed with enhanced features:', results);
 - **Invalid URLs** → Detect malformed URL formats
 - **Slow links** → Warn about timeouts and slow responses
 
+## 🔧 Package Management
+
+### Check package information
+```bash
+# Check current version
+gbu-a11y --version
+npm list -g gbu-accessibility-package
+
+# View package info
+npm info gbu-accessibility-package
+
+# Verify installation
+which gbu-a11y
+npm list -g | grep gbu-accessibility-package
+```
+
+### Update package
+```bash
+# Check for new versions
+npm outdated -g gbu-accessibility-package
+
+# Update to latest version
+npm update -g gbu-accessibility-package
+
+# Or reinstall latest version
+npm uninstall -g gbu-accessibility-package
+npm install -g gbu-accessibility-package@latest
+```
+
+### Cache management
+```bash
+# Verify cache
+npm cache verify
+
+# Clean cache (when having issues)
+npm cache clean --force
+
+# View cache location
+npm config get cache
+```
+
 ## 🧪 Testing and Demo
 
 ```bash

package/cli.js

@@ -23,6 +23,7 @@ const options = {
   langOnly: false,
   roleOnly: false,
   formsOnly: false,
+  nestedOnly: false,
   buttonsOnly: false,
   linksOnly: false,
   landmarksOnly: false,
@@ -80,6 +81,9 @@ for (let i = 0; i < args.length; i++) {
     case '--forms-only':
       options.formsOnly = true;
       break;
+    case '--nested-only':
+      options.nestedOnly = true;
+      break;
     case '--buttons-only':
       options.buttonsOnly = true;
       break;
@@ -227,7 +231,7 @@ async function main() {
   try {
     // Handle different modes - All modes now include cleanup
     if (options.cleanupOnly || options.altOnly || options.langOnly || options.roleOnly || 
-        options.formsOnly || options.buttonsOnly || options.linksOnly || options.landmarksOnly || 
+        options.formsOnly || options.nestedOnly || options.buttonsOnly || options.linksOnly || options.landmarksOnly || 
         options.headingsOnly || options.brokenLinksOnly) {
       // Individual modes - handle each separately, then run cleanup
     } else {
@@ -333,6 +337,24 @@ async function main() {
       showCompletionMessage(options, 'Form label fixes + cleanup');
       return;
       
+    } else if (options.nestedOnly) {
+      // Fix nested interactive controls + cleanup
+      console.log(chalk.blue('🎯 Running nested interactive controls fixes + cleanup...'));
+      const nestedResults = await fixer.fixNestedInteractiveControls(options.directory);
+      const nestedFixed = nestedResults.filter(r => r.status === 'fixed').length;
+      const totalNestedIssues = nestedResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Fixed nested interactive controls in ${nestedFixed} files (${totalNestedIssues} issues)`));
+      
+      // Run cleanup
+      console.log(chalk.blue('\n🧹 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(`✅ Cleaned duplicate roles in ${cleanupFixed} files`));
+      
+      showCompletionMessage(options, 'Nested interactive controls fixes + cleanup');
+      return;
+      
     } else if (options.buttonsOnly) {
       // Fix button names + cleanup
       console.log(chalk.blue('🔘 Running button name fixes + cleanup...'));

package/demo/form-labels-test.html

@@ -0,0 +1,87 @@
+<!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">
+    </div>
+    
+    <!-- Test Case 2: Input with empty label -->
+    <div>
+        <label for="email"></label>
+        <input type="email" id="email" name="email">
+    </div>
+    
+    <!-- Test Case 3: Input without aria-label -->
+    <div>
+        <input type="password" name="password" placeholder="Enter password">
+    </div>
+    
+    <!-- Test Case 4: Input with invalid aria-labelledby -->
+    <div>
+        <input type="tel" name="phone" aria-labelledby="nonexistent-id">
+    </div>
+    
+    <!-- Test Case 5: Input without title attribute -->
+    <div>
+        <input type="url" name="website">
+    </div>
+    
+    <!-- Test Case 6: Textarea without proper labeling -->
+    <div>
+        <textarea name="comments"></textarea>
+    </div>
+    
+    <!-- Test Case 7: Select without proper labeling -->
+    <div>
+        <select name="country">
+            <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">
+    </div>
+    
+    <!-- Test Case 10: Input without role override -->
+    <div>
+        <input type="range" name="volume" min="0" max="100">
+    </div>
+    
+    <!-- Test Case 11: Multiple inputs without proper structure -->
+    <form>
+        <input type="text" name="firstname">
+        <input type="text" name="lastname">
+        <input type="email" name="user_email">
+        <textarea name="message"></textarea>
+        <select name="priority">
+            <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...">
+        <input type="date" name="birthdate" placeholder="Select date">
+        <input type="time" name="appointment" placeholder="Select time">
+    </div>
+</body>
+</html>

package/demo/nested-controls-test.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nested Interactive Controls Test - Accessibility Issues</title>
+</head>
+<body>
+    <h1>Nested Interactive Controls Test Cases</h1>
+    
+    <!-- Test Case 1: div[role="button"] containing links (like in the axe error) -->
+    <div class="card-buttons" role="button">
+        <a href="https://business.mobile.rakuten.co.jp/solution/service/rakuten-ai-for-business/?scid=we_solution09_2504" class="btn btn-secondary" target="_blank" role="link">詳細を見る</a>
+        <a href="https://business.mobile.rakuten.co.jp/solution/ai/inquiry/?l=id=solution_ai_inquiry1&amp;scid=we_solution10_2504" class="btn btn-primary" target="_blank" role="link">お問い合わせ</a>
+    </div>
+    
+    <!-- Test Case 2: Button containing links -->
+    <button type="button" onclick="handleClick()">
+        <a href="/page1">Link inside button</a>
+        <span>Click me</span>
+    </button>
+    
+    <!-- Test Case 3: Link containing button -->
+    <a href="/page2">
+        <button type="button">Button inside link</button>
+    </a>
+    
+    <!-- Test Case 4: div[role="button"] containing input -->
+    <div role="button" tabindex="0" onclick="submit()">
+        <input type="text" placeholder="Search...">
+        <span>Submit</span>
+    </div>
+    
+    <!-- Test Case 5: Link containing select -->
+    <a href="/settings">
+        <select name="language">
+            <option value="ja">Japanese</option>
+            <option value="en">English</option>
+        </select>
+        Settings
+    </a>
+    
+    <!-- Test Case 6: Button containing textarea -->
+    <button type="submit">
+        <textarea name="comment" placeholder="Enter comment"></textarea>
+        <span>Send</span>
+    </button>
+    
+    <!-- Test Case 7: Multiple levels of nesting -->
+    <div role="button" tabindex="0">
+        <div class="container">
+            <a href="/nested">
+                <button type="button">Deeply nested</button>
+            </a>
+        </div>
+    </div>
+    
+    <!-- Test Case 8: div[role="button"] with tabindex containing interactive elements -->
+    <div role="button" tabindex="0" onclick="handleAction()">
+        <input type="checkbox" id="agree">
+        <label for="agree">I agree</label>
+        <a href="/terms">Terms</a>
+    </div>
+    
+    <!-- Test Case 9: Link containing details/summary -->
+    <a href="/info">
+        <details>
+            <summary>More info</summary>
+            <p>Details content</p>
+        </details>
+    </a>
+    
+    <!-- Test Case 10: Form elements nested in buttons -->
+    <button type="button" class="form-button">
+        <input type="radio" name="choice" value="1">
+        <input type="radio" name="choice" value="2">
+        <span>Choose option</span>
+    </button>
+    
+    <!-- Test Case 11: Correct structure (should not be flagged) -->
+    <div class="card-buttons">
+        <a href="/page1" class="btn btn-secondary">詳細を見る</a>
+        <a href="/page2" class="btn btn-primary">お問い合わせ</a>
+    </div>
+    
+    <!-- Test Case 12: Another correct structure -->
+    <button type="button" onclick="handleClick()">
+        <span>Click me</span>
+        <i class="icon"></i>
+    </button>
+</body>
+</html>