npm - gbu-accessibility-package - Versions diffs - 1.0.0 - Mend

gbu-accessibility-package 1.0.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 (13) hide show

package/PACKAGE_SUMMARY.md ADDED Viewed

@@ -0,0 +1,191 @@
+# 📦 Accessibility Fixer Package - Summary
+## 🎯 Mục đích
+Tool tự động sửa các vấn đề accessibility phổ biến trong HTML files, giúp website tuân thủ WCAG guidelines.
+## 📁 Cấu trúc Package
+```
+accessibility-package/
+├── lib/
+│   └── fixer.js              # Core logic
+├── demo/
+│   └── sample.html           # File demo để test
+├── cli.js                    # Command line interface
+├── example.js                # Ví dụ sử dụng
+├── package.json              # Package configuration
+├── README.md                 # Hướng dẫn đầy đủ
+├── QUICK_START.md           # Hướng dẫn nhanh
+└── PACKAGE_SUMMARY.md       # File này
+```
+## ✨ Tính năng chính
+### 1. Alt Attributes
+- ✅ Tự động thêm alt text cho images thiếu
+- ✅ Sửa empty alt attributes
+- ✅ Context-aware: phân tích nội dung xung quanh để tạo alt text phù hợp
+- ✅ Hỗ trợ nhiều ngôn ngữ (ja, en, vi, zh, etc.)
+### 2. Lang Attributes
+- ✅ Thêm lang attribute cho thẻ `<html>`
+- ✅ Configurable language
+### 3. Role Attributes
+- ✅ `role="img"` cho tất cả thẻ `<img>`
+- ✅ `role="link"` cho thẻ `<a>`
+- ✅ `role="button"` cho elements có onclick
+- ✅ `role="menubar"` và `role="menuitem"` cho navigation
+- ✅ Tự động detect clickable elements
+## 🚀 Cách sử dụng
+### Option 1: CLI (Đơn giản)
+```bash
+node accessibility-package/cli.js
+```
+### Option 2: Node.js
+```javascript
+const AccessibilityFixer = require("./accessibility-package/lib/fixer.js");
+const fixer = new AccessibilityFixer({ language: "ja" });
+await fixer.fixRoleAttributes(".");
+```
+### Option 3: NPM Scripts
+```json
+{
+  "scripts": {
+    "fix-a11y": "node accessibility-package/cli.js",
+    "preview-a11y": "node accessibility-package/cli.js --dry-run"
+  }
+}
+```
+## 📊 Kết quả Demo
+Với file demo, tool đã tìm và sửa:
+- **16 issues** tổng cộng
+- **1 lang attribute** missing
+- **3 alt attributes** missing/empty
+- **12 role attributes** missing
+## ⚙️ Configuration
+```javascript
+{
+  language: 'ja',        // 'ja', 'en', 'vi', 'zh', etc.
+  backupFiles: true,     // Tạo .backup files
+  dryRun: false         // Preview mode
+}
+```
+## 🎨 Before/After Example
+### Before:
+```html
+<html>
+  <img src="logo.png" />
+  <a href="/about">About</a>
+  <button onclick="submit()">Submit</button>
+</html>
+```
+### After:
+```html
+<html lang="ja">
+  <img src="logo.png" alt="ロゴ" role="img" />
+  <a href="/about" role="link">About</a>
+  <button onclick="submit()" role="button">Submit</button>
+</html>
+```
+## 🔧 Customization
+### Thay đổi alt text generation
+Sửa method `generateAltText()` trong `lib/fixer.js`
+### Thêm role rules mới
+Sửa method `fixRoleAttributesInContent()` trong `lib/fixer.js`
+### Thay đổi ngôn ngữ
+Set `language` parameter trong config
+## 📈 Performance
+- ✅ Xử lý hàng trăm files trong vài giây
+- ✅ Memory efficient
+- ✅ Backup tự động
+- ✅ Error handling tốt
+## 🛡️ Safety Features
+- ✅ Dry run mode để preview
+- ✅ Automatic backups (.backup files)
+- ✅ Duplicate attribute prevention
+- ✅ Error handling và logging
+## 📋 Checklist sử dụng
+1. [ ] Copy package vào dự án
+2. [ ] `npm install` dependencies
+3. [ ] Backup code (git commit)
+4. [ ] Test với `--dry-run`
+5. [ ] Chạy tool
+6. [ ] Review kết quả
+7. [ ] Commit changes
+## 🎯 Use Cases
+### Dự án mới
+```bash
+node accessibility-package/cli.js ./src
+```
+### Dự án có sẵn
+```bash
+node accessibility-package/cli.js --dry-run ./public
+# Review results, then:
+node accessibility-package/cli.js ./public
+```
+### CI/CD Integration
+```bash
+# In build script
+node accessibility-package/cli.js --no-backup ./dist
+```
+## 📞 Support
+- 📖 Đọc [README.md](./README.md) để biết chi tiết
+- 🚀 Xem [QUICK_START.md](./QUICK_START.md) để bắt đầu nhanh
+- 💡 Chạy [example.js](./example.js) để xem demos
+- ❓ Chạy `node cli.js --help` để xem options
+## 🎉 Kết luận
+Package này giúp bạn:
+- ⚡ **Tiết kiệm thời gian**: Tự động fix thay vì manual
+- 🎯 **Cải thiện accessibility**: Tuân thủ WCAG guidelines
+- 🛡️ **An toàn**: Backup và preview trước khi apply
+- 🔧 **Linh hoạt**: Dễ customize và integrate
+**Ready to make your website more accessible! 🌟**

package/QUICK_START.md ADDED Viewed

@@ -0,0 +1,137 @@
+# 🚀 Quick Start Guide
+Hướng dẫn nhanh để sử dụng Accessibility Fixer trong 5 phút.
+## ⚡ Cài đặt nhanh
+```bash
+# 1. Copy package vào dự án
+cp -r accessibility-package /path/to/your/project/
+# 2. Cài đặt dependencies
+cd your-project/accessibility-package
+npm install
+# 3. Chạy ngay!
+node cli.js
+```
+## 🎯 Sử dụng cơ bản
+### Cách 1: CLI (Đơn giản nhất)
+```bash
+# Fix toàn bộ dự án (current directory)
+node accessibility-package/cli.js
+# Fix thư mục cụ thể
+node accessibility-package/cli.js ./src
+# Preview trước khi fix
+node accessibility-package/cli.js --dry-run
+# Fix với ngôn ngữ khác
+node accessibility-package/cli.js -l en ./dist
+```
+### Cách 2: Node.js Script
+Tạo file `fix.js`:
+```javascript
+const AccessibilityFixer = require('./accessibility-package/lib/fixer.js');
+const fixer = new AccessibilityFixer({
+  language: 'ja',     // Thay đổi theo dự án
+  backupFiles: true,
+  dryRun: false
+});
+async function fix() {
+  await fixer.fixHtmlLang('.');
+  await fixer.fixEmptyAltAttributes('.');
+  await fixer.fixRoleAttributes('.');
+  console.log('✅ Done!');
+}
+fix();
+```
+Chạy: `node fix.js`
+## 📋 Checklist nhanh
+- [ ] Copy package vào dự án
+- [ ] `npm install` trong thư mục package
+- [ ] Backup code (git commit)
+- [ ] Chạy `--dry-run` để preview
+- [ ] Chạy tool để fix
+- [ ] Kiểm tra kết quả
+- [ ] Commit changes
+## 🎨 Kết quả mong đợi
+### Trước:
+```html
+<html>
+<body>
+  <img src="logo.png">
+  <a href="/about">About</a>
+  <button onclick="submit()">Submit</button>
+</body>
+</html>
+```
+### Sau:
+```html
+<html lang="ja">
+<body>
+  <img src="logo.png" alt="ロゴ" role="img">
+  <a href="/about" role="link">About</a>
+  <button onclick="submit()" role="button">Submit</button>
+</body>
+</html>
+```
+## 🔧 Tùy chỉnh nhanh
+### Thay đổi ngôn ngữ
+```javascript
+// Trong config
+language: 'en'  // 'ja', 'vi', 'zh', etc.
+```
+### Không tạo backup
+```bash
+node cli.js --no-backup
+```
+### Chỉ preview
+```bash
+node cli.js --dry-run
+```
+## ❓ Troubleshooting
+**Lỗi "Cannot find module"**
+```bash
+cd accessibility-package && npm install
+```
+**Duplicate attributes**
+- Tool tự động tránh duplicate
+- Nếu có, chạy lại tool sẽ tự clean up
+**Performance chậm**
+- Chạy từng thư mục nhỏ
+- Exclude node_modules
+## 📞 Cần trợ giúp?
+1. Đọc [README.md](./README.md) đầy đủ
+2. Xem [example.js](./example.js)
+3. Chạy `node cli.js --help`
+---
+**Chúc bạn coding vui vẻ! 🎉**

package/README.md ADDED Viewed

@@ -0,0 +1,305 @@
+# GBU Accessibility Package
+[![npm version](https://badge.fury.io/js/gbu-accessibility-package.svg)](https://badge.fury.io/js/gbu-accessibility-package)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+Một công cụ tự động sửa các vấn đề accessibility phổ biến trong HTML, bao gồm alt attributes, lang attributes, và role attributes với khả năng phân tích context thông minh.
+## 🚀 Tính năng
+- ✅ **Alt Attributes**: Tự động thêm alt text thông minh cho images
+- ✅ **Lang Attributes**: Thêm lang attribute cho thẻ `<html>`
+- ✅ **Role Attributes**: Thêm role attributes cho các elements
+  - `role="img"` cho tất cả thẻ `<img>`
+  - `role="link"` cho thẻ `<a>`
+  - `role="button"` cho elements có onclick
+  - `role="menubar"` và `role="menuitem"` cho navigation lists
+- ✅ **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
+## 📦 Cài đặt
+### NPM Install (Khuyến nghị)
+```bash
+# Cài đặt global
+npm install -g gbu-accessibility-package
+# Hoặc cài đặt local cho dự án
+npm install gbu-accessibility-package --save-dev
+```
+### Yarn Install
+```bash
+# Global
+yarn global add gbu-accessibility-package
+# Local
+yarn add gbu-accessibility-package --dev
+```
+## 🛠️ Sử dụng
+### Cách 1: Sử dụng CLI (Global Install)
+```bash
+# Sau khi cài đặt global
+gbu-a11y [options] [directory]
+# Hoặc
+accessibility-fixer [options] [directory]
+```
+### Cách 1b: CLI (Local Install)
+```bash
+# Chạy từ node_modules
+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"
+  }
+}
+```
+### Cách 2: Sử dụng trong Node.js
+```javascript
+const AccessibilityFixer = require('gbu-accessibility-package');
+// Tạo instance với config
+const fixer = new AccessibilityFixer({
+  language: 'ja',        // Ngôn ngữ cho lang attribute
+  backupFiles: true,     // Tạo backup files
+  dryRun: false         // false = apply changes, true = preview only
+});
+// Sử dụng các methods
+async function fixAccessibility() {
+  // Fix lang attributes
+  const langResults = await fixer.fixHtmlLang('.');
+  // Fix alt attributes
+  const altResults = await fixer.fixEmptyAltAttributes('.');
+  // Fix role attributes
+  const roleResults = await fixer.fixRoleAttributes('.');
+  console.log('Hoàn thành!');
+}
+fixAccessibility();
+```
+### Cách 3: Script nhanh
+Tạo file `fix-accessibility.js` trong dự án:
+```javascript
+const AccessibilityFixer = require('gbu-accessibility-package');
+const fixer = new AccessibilityFixer({
+  language: 'ja',        // Thay đổi theo ngôn ngữ dự án
+  backupFiles: true,
+  dryRun: false
+});
+async function fixAll() {
+  console.log('🚀 Bắt đầu fix accessibility...');
+  // Fix tất cả issues
+  await fixer.fixHtmlLang('.');
+  await fixer.fixEmptyAltAttributes('.');
+  await fixer.fixRoleAttributes('.');
+  console.log('✅ Hoàn thành!');
+}
+fixAll();
+```
+Chạy script:
+```bash
+node fix-accessibility.js
+```
+## ⚙️ Configuration Options
+```javascript
+const config = {
+  language: 'ja',           // Lang attribute value ('ja', 'en', 'vi', etc.)
+  backupFiles: true,        // Tạo .backup files
+  dryRun: false            // true = chỉ preview, false = apply changes
+};
+const fixer = new AccessibilityFixer(config);
+```
+## 📋 Các Methods có sẵn
+### 1. fixHtmlLang(directory)
+Thêm lang attribute cho thẻ `<html>`
+```javascript
+const results = await fixer.fixHtmlLang('./src');
+```
+### 2. fixEmptyAltAttributes(directory)
+Sửa missing/empty alt attributes cho images
+```javascript
+const results = await fixer.fixEmptyAltAttributes('./src');
+```
+### 3. fixRoleAttributes(directory)
+Thêm role attributes cho các elements
+```javascript
+const results = await fixer.fixRoleAttributes('./src');
+```
+### 4. addMainLandmarks(directory)
+Phát hiện và suggest main landmarks
+```javascript
+const suggestions = await fixer.addMainLandmarks('./src');
+```
+## 🎯 Ví dụ kết quả
+### Alt Attributes
+```html
+<!-- Trước -->
+<img src="logo.png">
+<img src="icon.png" alt="">
+<!-- Sau -->
+<img src="logo.png" alt="ロゴ">
+<img src="icon.png" alt="アイコン">
+```
+### Role Attributes
+```html
+<!-- Trước -->
+<img src="photo.jpg" alt="Beautiful sunset">
+<a href="/about">About Us</a>
+<button onclick="submit()">Submit</button>
+<!-- Sau -->
+<img src="photo.jpg" alt="Beautiful sunset" role="img">
+<a href="/about" role="link">About Us</a>
+<button onclick="submit()" role="button">Submit</button>
+```
+### Lang Attributes
+```html
+<!-- Trước -->
+<html>
+<!-- Sau -->
+<html lang="ja">
+```
+## 🔧 Customization
+### Thay đổi ngôn ngữ cho alt text
+Sửa method `generateAltText` trong `lib/fixer.js`:
+```javascript
+generateAltText(imgTag, htmlContent = '', imgIndex = 0) {
+  // Thay đổi các text này theo ngôn ngữ dự án
+  if (srcValue.includes('logo')) {
+    return 'Logo';           // Thay vì 'ロゴ'
+  } else if (srcValue.includes('icon')) {
+    return 'Icon';           // Thay vì 'アイコン'
+  }
+  // ... thêm các cases khác
+}
+```
+### Thêm role rules mới
+Sửa method `fixRoleAttributesInContent` để thêm rules:
+```javascript
+// Ví dụ: thêm role cho form elements
+fixed = fixed.replace(
+  /<form([^>]*)(?!.*role\s*=)([^>]*>)/gi,
+  '<form$1 role="form"$2'
+);
+```
+## 🚨 Lưu ý quan trọng
+1. **Backup**: Luôn tạo backup trước khi chạy tool
+2. **Test**: Chạy với `dryRun: true` trước để xem preview
+3. **Review**: Kiểm tra kết quả sau khi chạy
+4. **Git**: Commit code trước khi chạy tool
+## 📊 Monitoring Results
+Tool sẽ hiển thị:
+- Số files được xử lý
+- Số issues được tìm thấy và sửa
+- Chi tiết từng file
+- Thống kê tổng quan
+```
+📁 index.html:
+  🖼️ Missing role: Image 1 should have role="img"
+  🔗 Missing role: Anchor 1 should have role="link"
+  🖼️ Added role="img" to image element
+  🔗 Added role="link" to anchor element
+✅ Fixed role attributes in: index.html
+📊 Summary: Found 245 role attribute issues across 50 files
+```
+## 🛠️ Troubleshooting
+### Lỗi "Cannot find module"
+```bash
+cd accessibility-package
+npm install
+```
+### Duplicate role attributes
+Chạy cleanup script:
+```javascript
+// Tạo file cleanup.js
+const fs = require('fs');
+const path = require('path');
+async function cleanup() {
+  // Code cleanup duplicate roles
+  const content = await fs.promises.readFile('file.html', 'utf8');
+  const fixed = content.replace(/role="([^"]+)"(\s+role="\1")+/g, 'role="$1"');
+  await fs.promises.writeFile('file.html', fixed);
+}
+```
+### Performance với project lớn
+- Chạy từng thư mục con
+- Sử dụng `dryRun: true` để test trước
+- Exclude thư mục không cần thiết
+## 📝 License
+MIT License - Tự do sử dụng cho mọi dự án.
+## 🤝 Contributing
+1. Fork repository
+2. Tạo feature branch
+3. Commit changes
+4. Tạo Pull Request
+---
+**Happy coding! 🚀**