gbu-accessibility-package 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -5,6 +5,26 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.2.0] - 2024-07-28
+
+### Added
+- **Enhanced Alt Attribute Integration**: Tích hợp hoàn toàn EnhancedAltChecker và EnhancedAltGenerator vào AccessibilityFixer
+- **Broken Links Detection**: Tính năng phát hiện liên kết bị hỏng và tài nguyên 404
+- **Clean Architecture**: Tất cả tính năng enhanced được tích hợp trong một file duy nhất
+- **Improved Performance**: Giảm overhead từ việc import nhiều module riêng biệt
+- **Simplified API**: Không cần import các class enhanced riêng biệt
+
+### Changed
+- **BREAKING**: EnhancedAltChecker và EnhancedAltGenerator không còn là class riêng biệt
+- **Integrated Features**: Tất cả tính năng enhanced alt đã được tích hợp vào AccessibilityFixer
+- **Cleaner Codebase**: Loại bỏ các file enhanced riêng lẻ để có kiến trúc gọn gàng hơn
+- **Updated Documentation**: README và README-vi được cập nhật để phản ánh kiến trúc mới
+
+### Migration Guide
+- **For most users**: Không cần thay đổi gì - tất cả tính năng vẫn hoạt động như cũ
+- **For programmatic usage**: Chỉ cần import AccessibilityFixer, không cần import EnhancedAltChecker/Generator riêng
+- **Enhanced features**: Vẫn có sẵn thông qua các config options trong AccessibilityFixer
+
 ## [3.1.0] - 2024-07-25
 
 ### Changed

package/README-vi.md

@@ -9,6 +9,7 @@
 ## ✨ Tính năng
 
 ### 🎯 **Sửa lỗi Accessibility cơ bản**
+
 - 🖼️ **Tạo Alt Text thông minh** - Alt attributes nhận biết ngữ cảnh cho hình ảnh
 - 🏷️ **Hỗ trợ Aria Label** - Tự động tạo aria-label phù hợp với alt text
 - 🌐 **HTML Lang Attributes** - Tự động sửa thuộc tính ngôn ngữ
@@ -18,17 +19,21 @@
 - 🔗 **Link Names** - Sửa links rỗng và phát hiện text generic
 - 🏛️ **Landmarks** - Thêm main và navigation landmarks thiếu
 - 📑 **Phân tích Heading** - Phân tích cấu trúc heading với gợi ý (không tự động sửa)
+- 🔍 **Broken Links Detection** - Phát hiện liên kết bị hỏng và tài nguyên 404
 - 🧹 **Dọn dẹp Duplicate** - Loại bỏ role attributes trùng lặp
 
-### 🚀 **Tính năng Enhanced Alt Attribute (MỚI!)**
-- 🔍 **Phân tích toàn diện** - Phân loại loại hình ảnh và kiểm tra chất lượng
-- 🎨 **Tạo Alt đa dạng** - Nhiều chiến lược cho alt text sáng tạo
-- 🌐 **Hỗ trợ đa ngôn ngữ** - Từ vựng tiếng Nhật, Anh, Việt
+### 🚀 **Tính năng Enhanced Alt Attribute (Đã tích hợp!)**
+
+- 🔍 **Phân tích toàn diện** - Phân loại loại hình ảnh và kiểm tra chất lượng tích hợp sẵn
+- 🎨 **Tạo Alt đa dạng** - Nhiều chiến lược cho alt text sáng tạo được tích hợp trong core
+- 🌐 **Hỗ trợ đa ngôn ngữ** - Từ vựng tiếng Nhật, Anh, Việt tích hợp sẵn
 - 🎭 **Mức độ sáng tạo** - Chế độ Conservative, Balanced, Creative
 - 🧠 **Nhận biết ngữ cảnh** - Tích hợp ngữ cảnh thương hiệu, cảm xúc, kỹ thuật
 - 📊 **Trực quan hóa dữ liệu** - Mô tả chuyên biệt cho biểu đồ và đồ thị
+- 🧹 **Kiến trúc gọn gàng** - Tất cả tính năng enhanced được tích hợp trong một file duy nhất
 
 ### 🛠️ **Tính năng tiện ích**
+
 - 📁 **Xử lý hàng loạt** - Xử lý toàn bộ thư mục đệ quy
 - 💾 **Backup tùy chọn** - Tạo file backup khi cần với flag --backup
 - 🔍 **Chế độ Dry Run** - Xem trước thay đổi trước khi áp dụng
@@ -103,6 +108,7 @@ Chế độ sửa lỗi:
   --links-only             Sửa link names + dọn dẹp
   --landmarks-only         Sửa landmarks + dọn dẹp
   --headings-only          Phân tích cấu trúc heading (không tự động sửa)
+  --links-check            Kiểm tra liên kết bị hỏng và tài nguyên 404
   --cleanup-only           Chỉ dọn dẹp role attributes trùng lặp
 
 Tùy chọn Enhanced Alt:
@@ -131,6 +137,7 @@ gbu-a11y -l en ./public
 gbu-a11y --alt-only          # Sửa alt attributes + dọn dẹp
 gbu-a11y --forms-only        # Sửa form labels + dọn dẹp
 gbu-a11y --buttons-only      # Sửa button names + dọn dẹp
+gbu-a11y --links-check       # Kiểm tra liên kết bị hỏng + dọn dẹp
 
 # Tính năng enhanced alt attribute
 gbu-a11y --enhanced-alt                                    # Chế độ enhanced cơ bản
@@ -149,6 +156,7 @@ gbu-a11y --enhanced-alt --dry-run                          # Xem trước sửa
 ### Mức độ sáng tạo
 
 #### Conservative (Bảo thủ)
+
 - Mô tả đơn giản, thực tế
 - Tập trung vào chức năng cơ bản
 - Biến thể từ vựng tối thiểu
@@ -156,6 +164,7 @@ gbu-a11y --enhanced-alt --dry-run                          # Xem trước sửa
 **Ví dụ**: `alt="Biểu đồ"`, `alt="Logo"`
 
 #### Balanced (Cân bằng - Mặc định)
+
 - Mô tả nhận biết ngữ cảnh
 - Sáng tạo vừa phải
 - Cân bằng giữa đơn giản và chi tiết
@@ -163,6 +172,7 @@ gbu-a11y --enhanced-alt --dry-run                          # Xem trước sửa
 **Ví dụ**: `alt="Biểu đồ hiệu suất bán hàng"`, `alt="Logo công ty"`
 
 #### Creative (Sáng tạo)
+
 - Mô tả phong phú, chi tiết
 - Tích hợp ngữ cảnh cảm xúc
 - Nhận biết thương hiệu và ngữ cảnh cao
@@ -189,54 +199,51 @@ gbu-a11y --enhanced-alt --dry-run                          # Xem trước sửa
 ### Sử dụng cơ bản
 
 ```javascript
-const { AccessibilityFixer } = require('gbu-accessibility-package');
+const { AccessibilityFixer } = require("gbu-accessibility-package");
 
 const fixer = new AccessibilityFixer({
-  language: 'vi',
+  language: "vi",
   backupFiles: true,
-  dryRun: false
+  dryRun: false,
 });
 
 // Sửa tất cả vấn đề accessibility
-fixer.fixAllAccessibilityIssues('./src').then(results => {
-  console.log('Hoàn thành sửa lỗi accessibility:', results);
+fixer.fixAllAccessibilityIssues("./src").then((results) => {
+  console.log("Hoàn thành sửa lỗi accessibility:", results);
 });
 
 // Sửa các vấn đề cụ thể
-await fixer.fixEmptyAltAttributes('./src');
-await fixer.fixFormLabels('./src');
-await fixer.fixButtonNames('./src');
+await fixer.fixEmptyAltAttributes("./src");
+await fixer.fixFormLabels("./src");
+await fixer.fixButtonNames("./src");
 ```
 
-### Chế độ Enhanced Alt Attribute
+### Chế độ Enhanced Alt Attribute (Tích hợp sẵn)
 
 ```javascript
-const { AccessibilityFixer, EnhancedAltChecker } = require('gbu-accessibility-package');
+const { AccessibilityFixer } = require("gbu-accessibility-package");
 
-// Sử dụng AccessibilityFixer với chế độ enhanced
+// Sử dụng AccessibilityFixer với chế độ enhanced (tích hợp sẵn)
 const fixer = new AccessibilityFixer({
-  language: 'vi',
+  language: "vi",
   enhancedAltMode: true,
-  altCreativity: 'creative',
+  altCreativity: "creative",
   includeEmotions: true,
-  strictAltChecking: true
+  strictAltChecking: true,
 });
 
-await fixer.fixEmptyAltAttributes('./src');
+await fixer.fixEmptyAltAttributes("./src");
 
-// Sử dụng EnhancedAltChecker riêng biệt
-const checker = new EnhancedAltChecker({
-  language: 'vi',
-  strictMode: true
-});
-
-const issues = checker.analyzeAltAttributes(htmlContent);
-console.log('Tìm thấy vấn đề alt attribute:', issues);
+// Tất cả tính năng enhanced đã được tích hợp trong AccessibilityFixer
+// Không cần import thêm class riêng biệt
+const results = await fixer.fixAllAccessibilityIssues("./src");
+console.log("Hoàn thành sửa lỗi với enhanced features:", results);
 ```
 
 ## 🎯 Những gì được sửa
 
 ### Alt Attributes (Chế độ Enhanced)
+
 - **Alt attributes thiếu** → Tạo alt text nhận biết ngữ cảnh
 - **Alt attributes rỗng** → Mô tả thông minh dựa trên nội dung
 - **Alt text generic** → Mô tả cụ thể, có ý nghĩa
@@ -245,21 +252,31 @@ console.log('Tìm thấy vấn đề alt attribute:', issues);
 - **Trực quan hóa dữ liệu** → Loại biểu đồ + xu hướng + dữ liệu chính
 
 ### Accessibility Form
+
 - **Form labels thiếu** → Tạo aria-label thông minh
 - **Input không có label** → Gợi ý label dựa trên ngữ cảnh
 - **Cấu trúc form** → Liên kết label phù hợp
 
 ### Phần tử tương tác
+
 - **Button rỗng** → Tên button dựa trên hành động
 - **Text link generic** → Mục đích link mô tả
 - **Tên button thiếu** → Mô tả dựa trên chức năng
 
 ### Cấu trúc tài liệu
+
 - **Lang attributes thiếu** → Phát hiện ngôn ngữ tự động
 - **Landmark thiếu** → Main và navigation landmarks
 - **Cấu trúc heading** → Phân tích và khuyến nghị
 - **Role attributes** → Gán role tuân thủ WCAG
 
+### Kiểm tra liên kết
+
+- **Liên kết bị hỏng** → Phát hiện HTTP 404, 500, timeout
+- **Tài nguyên không tồn tại** → Kiểm tra file local thiếu
+- **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
+
 ## 🧪 Kiểm tra và Demo
 
 ```bash
@@ -329,4 +346,4 @@ Dự án này được cấp phép theo Giấy phép MIT - xem file [LICENSE](LI
 
 **Được tạo với ❤️ bởi GBU Team**
 
-Để biết thêm thông tin, hãy truy cập [GitHub repository](https://github.com/dangpv94/gbu-accessibility-tool) của chúng tôi.
+Để biết thêm thông tin, hãy truy cập [GitHub repository](https://github.com/dangpv94/gbu-accessibility-tool) của chúng tôi.

package/README.md

@@ -18,15 +18,17 @@
 - 🔗 **Link Names** - Fix empty links and detect generic link text
 - 🏛️ **Landmarks** - Add missing main and navigation landmarks
 - 📑 **Heading Analysis** - Analyze heading structure with suggestions (no auto-fix)
+- 🔍 **Broken Links Detection** - Detect broken links and 404 resources
 - 🧹 **Duplicate Cleanup** - Remove duplicate role attributes
 
-### 🚀 **Enhanced Alt Attribute Features (NEW!)**
-- 🔍 **Comprehensive Analysis** - Image type classification and quality checking
-- 🎨 **Diverse Alt Generation** - Multiple strategies for creative alt text
-- 🌐 **Multi-language Support** - Japanese, English, Vietnamese vocabulary
+### 🚀 **Enhanced Alt Attribute Features (Integrated!)**
+- 🔍 **Comprehensive Analysis** - Image type classification and quality checking built-in
+- 🎨 **Diverse Alt Generation** - Multiple strategies for creative alt text integrated in core
+- 🌐 **Multi-language Support** - Japanese, English, Vietnamese vocabulary built-in
 - 🎭 **Creativity Levels** - Conservative, Balanced, Creative modes
 - 🧠 **Context Awareness** - Brand, emotional, and technical context integration
 - 📊 **Data Visualization** - Specialized descriptions for charts and graphs
+- 🧹 **Clean Architecture** - All enhanced features integrated in a single file
 
 ### 🛠️ **Utility Features**
 - 📁 **Batch Processing** - Process entire directories recursively
@@ -103,6 +105,7 @@ Fix Modes:
   --links-only             Fix link names + cleanup
   --landmarks-only         Fix landmarks + cleanup
   --headings-only          Analyze heading structure (no auto-fix)
+  --links-check            Check for broken links and 404 resources
   --cleanup-only           Only cleanup duplicate role attributes
 
 Enhanced Alt Options:
@@ -131,6 +134,7 @@ gbu-a11y -l en ./public
 gbu-a11y --alt-only          # Fix alt attributes + cleanup
 gbu-a11y --forms-only        # Fix form labels + cleanup
 gbu-a11y --buttons-only      # Fix button names + cleanup
+gbu-a11y --links-check       # Check broken links + cleanup
 
 # Enhanced alt attribute features
 gbu-a11y --enhanced-alt                                    # Basic enhanced mode
@@ -208,12 +212,12 @@ await fixer.fixFormLabels('./src');
 await fixer.fixButtonNames('./src');
 ```
 
-### Enhanced Alt Attribute Mode
+### Enhanced Alt Attribute Mode (Integrated)
 
 ```javascript
-const { AccessibilityFixer, EnhancedAltChecker } = require('gbu-accessibility-package');
+const { AccessibilityFixer } = require('gbu-accessibility-package');
 
-// Use AccessibilityFixer with enhanced mode
+// Use AccessibilityFixer with enhanced mode (integrated)
 const fixer = new AccessibilityFixer({
   language: 'en',
   enhancedAltMode: true,
@@ -224,14 +228,10 @@ const fixer = new AccessibilityFixer({
 
 await fixer.fixEmptyAltAttributes('./src');
 
-// Use EnhancedAltChecker separately
-const checker = new EnhancedAltChecker({
-  language: 'ja',
-  strictMode: true
-});
-
-const issues = checker.analyzeAltAttributes(htmlContent);
-console.log('Alt attribute issues found:', issues);
+// All enhanced features are now integrated in AccessibilityFixer
+// No need to import separate classes
+const results = await fixer.fixAllAccessibilityIssues('./src');
+console.log('Accessibility fixes completed with enhanced features:', results);
 ```
 
 ## 🎯 What Gets Fixed
@@ -260,6 +260,12 @@ console.log('Alt attribute issues found:', issues);
 - **Heading structure** → Analysis and recommendations
 - **Role attributes** → WCAG-compliant role assignments
 
+### Link Validation
+- **Broken links** → Detect HTTP 404, 500, timeout errors
+- **Missing resources** → Check for missing local files
+- **Invalid URLs** → Detect malformed URL formats
+- **Slow links** → Warn about timeouts and slow responses
+
 ## 🧪 Testing and Demo
 
 ```bash

package/cli.js

@@ -27,6 +27,7 @@ const options = {
   linksOnly: false,
   landmarksOnly: false,
   headingsOnly: false,
+  brokenLinksOnly: false,
   // Enhanced alt options
   enhancedAlt: false,
   altCreativity: 'balanced', // conservative, balanced, creative
@@ -91,6 +92,10 @@ for (let i = 0; i < args.length; i++) {
     case '--headings-only':
       options.headingsOnly = true;
       break;
+    case '--links-check':
+    case '--broken-links':
+      options.brokenLinksOnly = true;
+      break;
     case '--enhanced-alt':
       options.enhancedAlt = true;
       break;
@@ -133,6 +138,7 @@ Options:
   --links-only             Fix link names + cleanup
   --landmarks-only         Fix landmarks + cleanup
   --headings-only          Analyze heading structure (no auto-fix)
+  --links-check            Check for broken links and 404 resources (no auto-fix)
   --enhanced-alt           Use enhanced alt attribute analysis and generation
   --alt-creativity <mode>  Alt text creativity: conservative, balanced, creative (default: balanced)
   --include-emotions       Include emotional descriptors in alt text
@@ -162,6 +168,7 @@ Examples:
   node cli.js --links-only             # Fix link names + cleanup
   node cli.js --landmarks-only         # Fix landmarks + cleanup
   node cli.js --headings-only          # Analyze heading structure only
+  node cli.js --links-check            # Check for broken links and 404s
   node cli.js --cleanup-only           # Only cleanup duplicate roles
   node cli.js ./src                    # Fix src directory (comprehensive)
   node cli.js -l en --dry-run ./dist   # Preview comprehensive fixes in English
@@ -220,7 +227,8 @@ 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.headingsOnly) {
+        options.formsOnly || options.buttonsOnly || options.linksOnly || options.landmarksOnly || 
+        options.headingsOnly || options.brokenLinksOnly) {
       // Individual modes - handle each separately, then run cleanup
     } else {
       // Default mode: Run comprehensive fix (all fixes including cleanup)
@@ -390,6 +398,18 @@ async function main() {
       
       showCompletionMessage(options, 'Heading analysis');
       return;
+      
+    } else if (options.brokenLinksOnly) {
+      // Check broken links only (no fixes, no cleanup)
+      console.log(chalk.blue('🔗 Running broken links check only...'));
+      const linkResults = await fixer.checkBrokenLinks(options.directory);
+      const totalBrokenLinks = linkResults.reduce((sum, r) => sum + (r.issues || 0), 0);
+      
+      console.log(chalk.green(`\n✅ Checked links in ${linkResults.length} files (${totalBrokenLinks} issues found)`));
+      console.log(chalk.gray('💡 Broken link issues require manual review and cannot be auto-fixed'));
+      
+      showCompletionMessage(options, 'Broken links check');
+      return;
     }
 
   } catch (error) {

package/demo/broken-links-test.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Broken Links Test</title>
+    <!-- Broken CSS -->
+    <link rel="stylesheet" href="missing-style.css">
+    <!-- Working CSS (if exists) -->
+    <link rel="stylesheet" href="../package.json">
+</head>
+<body>
+    <h1>Broken Links Test</h1>
+    
+    <!-- Working local link -->
+    <a href="advanced-test.html">Working local link</a>
+    
+    <!-- Broken local link -->
+    <a href="non-existent-page.html">Broken local link</a>
+    
+    <!-- Working external link -->
+    <a href="https://www.google.com">Working external link</a>
+    
+    <!-- Broken external link -->
+    <a href="https://this-domain-does-not-exist-12345.com">Broken external link</a>
+    
+    <!-- Working image -->
+    <img src="advanced-test.html" alt="Working image reference">
+    
+    <!-- Broken image -->
+    <img src="missing-image.jpg" alt="Broken image">
+    
+    <!-- Broken script -->
+    <script src="missing-script.js"></script>
+    
+    <!-- Skip patterns -->
+    <a href="#anchor">Anchor link (should skip)</a>
+    <a href="mailto:test@example.com">Email link (should skip)</a>
+    <a href="tel:+1234567890">Phone link (should skip)</a>
+    <a href="javascript:void(0)">JavaScript link (should skip)</a>
+</body>
+</html>

package/index.js

@@ -1,4 +1,3 @@
 const AccessibilityFixer = require('./lib/fixer.js');
-const EnhancedAltChecker = require('./lib/enhanced-alt-checker.js');
 
-module.exports = { AccessibilityFixer, EnhancedAltChecker };
+module.exports = { AccessibilityFixer };