chore: update project documentation, audit reports, and initialize IDE configuration files

docs/audits/ACCESSIBILITY_AUDIT_QUICK_REFERENCE.md

@@ -1,94 +1,94 @@
-# GoodGo Platform Accessibility Audit - Quick Reference
-**Date:** April 10, 2026 | **Status:** 70-75% WCAG 2.1 AA Compliant
+# GoodGo Platform Kiểm Toán Khả Năng Tiếp Cận - Tài Liệu Tham Khảo Nhanh
+**Ngày:** 10 tháng 4 năm 2026 | **Trạng thái:** Tuân thủ WCAG 2.1 AA ở mức 70–75%
 
 ---
 
-## 📊 Key Metrics
+## 📊 Chỉ Số Chính
 
-| Metric | Count | Status |
-|--------|-------|--------|
-| Total Files Analyzed | 90+ | ✅ |
-| ARIA Attributes Found | 75 | ✅ |
-| Files Using ARIA | 14 | ✅ |
-| Critical Issues | 2 | 🔴 |
-| Major Issues | 3 | 🟡 |
-| Minor Issues | 2 | 🟢 |
+| Chỉ số | Số lượng | Trạng thái |
+|--------|----------|------------|
+| Tổng số tệp đã phân tích | 90+ | ✅ |
+| Thuộc tính ARIA tìm thấy | 75 | ✅ |
+| Tệp sử dụng ARIA | 14 | ✅ |
+| Vấn đề nghiêm trọng | 2 | 🔴 |
+| Vấn đề lớn | 3 | 🟡 |
+| Vấn đề nhỏ | 2 | 🟢 |
 
 ---
 
-## 🔴 CRITICAL ISSUES (Must Fix)
+## 🔴 VẤN ĐỀ NGHIÊM TRỌNG (Phải Sửa)
 
-### 1. Dialog Component Missing Accessibility
-**File:** `apps/web/components/ui/dialog.tsx`
-**Issues:**
-- Missing `role="dialog"`
-- Missing `aria-modal="true"`
-- No focus trap
-- No escape key handling
-- Background not hidden from screen readers
+### 1. Thành Phần Dialog Thiếu Khả Năng Tiếp Cận
+**Tệp:** `apps/web/components/ui/dialog.tsx`
+**Vấn đề:**
+- Thiếu `role="dialog"`
+- Thiếu `aria-modal="true"`
+- Không có bẫy tiêu điểm (focus trap)
+- Không xử lý phím Escape
+- Phần nền không bị ẩn khỏi trình đọc màn hình
 
-**Time to Fix:** 2-3 hours | **Priority:** 1
+**Thời gian sửa:** 2–3 giờ | **Ưu tiên:** 1
 
-**Quick Fix Checklist:**
-- [ ] Add role="dialog" to dialog container
-- [ ] Add aria-modal="true"
-- [ ] Implement escape key listener
-- [ ] Add aria-hidden="true" to backdrop
-- [ ] Test with NVDA screen reader
+**Danh sách kiểm tra sửa nhanh:**
+- [ ] Thêm role="dialog" vào vùng chứa dialog
+- [ ] Thêm aria-modal="true"
+- [ ] Triển khai trình lắng nghe phím Escape
+- [ ] Thêm aria-hidden="true" vào lớp phủ nền
+- [ ] Kiểm tra với trình đọc màn hình NVDA
 
 ---
 
-### 2. Image Gallery Thumbnail Buttons Missing Labels
-**File:** `apps/web/components/listings/image-gallery.tsx:69-84`
-**Issue:** Thumbnail buttons lack aria-labels
+### 2. Nút Hình Thu Nhỏ Trong Thư Viện Ảnh Thiếu Nhãn
+**Tệp:** `apps/web/components/listings/image-gallery.tsx:69-84`
+**Vấn đề:** Các nút hình thu nhỏ thiếu aria-label
 
-**Time to Fix:** 15-30 minutes | **Priority:** 2
+**Thời gian sửa:** 15–30 phút | **Ưu tiên:** 2
 
-**Quick Fix:**
+**Sửa nhanh:**
 ```tsx
-// Add this to each thumbnail button:
+// Thêm vào mỗi nút hình thu nhỏ:
 aria-label={`Select image ${index + 1}${img.caption ? ': ' + img.caption : ''}`}
 aria-pressed={index === selectedIndex}
 ```
 
 ---
 
-## 🟡 MAJOR ISSUES (Should Fix)
+## 🟡 VẤN ĐỀ LỚN (Nên Sửa)
 
-### 1. Admin Layout Header Missing Banner Role
-**File:** `apps/web/app/[locale]/(admin)/layout.tsx:134`
+### 1. Tiêu Đề Layout Admin Thiếu Vai Trò Banner
+**Tệp:** `apps/web/app/[locale]/(admin)/layout.tsx:134`
 
-**Quick Fix:**
+**Sửa nhanh:**
 ```tsx
-// Change from:
+// Đổi từ:
 <header className="sticky...">
 
-// To:
+// Sang:
 <header role="banner" className="sticky...">
 ```
 
-**Time to Fix:** 2 minutes | **Priority:** 3
+**Thời gian sửa:** 2 phút | **Ưu tiên:** 3
 
 ---
 
-### 2. Color Contrast Not Verified
-**Issue:** CSS variables defined but contrast ratios not tested
-**Impact:** Potential WCAG 1.4.3 violation
-**Time to Fix:** 4-6 hours testing
+### 2. Độ Tương Phản Màu Chưa Được Kiểm Tra
+**Vấn đề:** Các biến CSS đã được định nghĩa nhưng tỷ lệ tương phản chưa được kiểm tra
+**Tác động:** Có thể vi phạm WCAG 1.4.3
+**Thời gian sửa:** 4–6 giờ kiểm tra
 
-**Testing Checklist:**
-- [ ] Extract CSS variable values from globals.css
-- [ ] Test with WebAIM Contrast Checker
-- [ ] Verify 4.5:1 for normal text (WCAG AA)
-- [ ] Verify 7:1 for AAA compliance
-- [ ] Test in both light and dark modes
+**Danh sách kiểm tra:**
+- [ ] Trích xuất giá trị biến CSS từ globals.css
+- [ ] Kiểm tra bằng WebAIM Contrast Checker
+- [ ] Xác minh tỷ lệ 4.5:1 cho văn bản thông thường (WCAG AA)
+- [ ] Xác minh tỷ lệ 7:1 cho tuân thủ AAA
+- [ ] Kiểm tra ở cả chế độ sáng và tối
 
 ---
 
-### 3. Landing Page Search Input Missing Visible Label
-**File:** `apps/web/app/[locale]/(public)/page.tsx:87-92`
+### 3. Ô Nhập Tìm Kiếm Trang Đầu Thiếu Nhãn Hiển Thị
+**Tệp:** `apps/web/app/[locale]/(public)/page.tsx:87-92`
 
-**Quick Fix:**
+**Sửa nhanh:**
 ```tsx
 <div className="flex flex-col gap-1">
   <label htmlFor="search-input" className="sr-only">
@@ -103,145 +103,145 @@ aria-pressed={index === selectedIndex}
 </div>
 ```
 
-**Time to Fix:** 30 minutes | **Priority:** 4
+**Thời gian sửa:** 30 phút | **Ưu tiên:** 4
 
 ---
 
-## 🟢 MINOR ISSUES (Nice to Have)
+## 🟢 VẤN ĐỀ NHỎ (Nên Có)
 
-### 1. Redundant aria-labels on Visible Text
-**File:** `apps/web/app/[locale]/(dashboard)/layout.tsx:125`
-**Issue:** Links have aria-label when text is already visible
+### 1. aria-label Thừa Trên Văn Bản Đã Hiển Thị
+**Tệp:** `apps/web/app/[locale]/(dashboard)/layout.tsx:125`
+**Vấn đề:** Các liên kết có aria-label trong khi văn bản đã hiển thị
 
-**Recommendation:** Remove redundant aria-labels - visible text is better for accessibility
+**Khuyến nghị:** Xóa các aria-label thừa — văn bản hiển thị sẵn tốt hơn cho khả năng tiếp cận
 
 ---
 
-## ✅ WHAT'S WORKING WELL
+## ✅ NHỮNG GÌ ĐANG HOẠT ĐỘNG TỐT
 
-### Authentication Forms
-- ✅ All inputs have visible labels with `<Label htmlFor="id">`
-- ✅ Error messages linked via `aria-describedby`
-- ✅ Invalid state marked with `aria-invalid`
-- ✅ Password toggle has proper `aria-label`
-- **Example:** `apps/web/app/[locale]/(auth)/login/page.tsx`
+### Biểu Mẫu Xác Thực
+- ✅ Tất cả các ô nhập có nhãn hiển thị với `<Label htmlFor="id">`
+- ✅ Thông báo lỗi được liên kết qua `aria-describedby`
+- ✅ Trạng thái không hợp lệ được đánh dấu bằng `aria-invalid`
+- ✅ Nút hiện/ẩn mật khẩu có `aria-label` đúng chuẩn
+- **Ví dụ:** `apps/web/app/[locale]/(auth)/login/page.tsx`
 
-### Skip-to-Content Link
-- ✅ Properly implemented with focus visibility
-- ✅ Hidden by default, visible on focus
-- ✅ Links to `id="main-content"`
-- **Example:** `apps/web/app/[locale]/layout.tsx:105-110`
+### Liên Kết Bỏ Qua Nội Dung (Skip-to-Content)
+- ✅ Được triển khai đúng chuẩn với khả năng hiển thị tiêu điểm
+- ✅ Ẩn theo mặc định, hiển thị khi được tiêu điểm
+- ✅ Liên kết đến `id="main-content"`
+- **Ví dụ:** `apps/web/app/[locale]/layout.tsx:105-110`
 
-### Navigation
-- ✅ All navs have `aria-label`
-- ✅ Mobile menu toggles have dynamic labels
-- ✅ Icons properly hidden with `aria-hidden="true"`
-- **Examples:** All layout files
+### Điều Hướng
+- ✅ Tất cả các nav có `aria-label`
+- ✅ Nút chuyển đổi menu di động có nhãn động
+- ✅ Biểu tượng được ẩn đúng chuẩn với `aria-hidden="true"`
+- **Ví dụ:** Tất cả các tệp layout
 
-### Search & Filters
-- ✅ Filter section has `role="search"`
-- ✅ All selects have `aria-label`
-- ✅ Range inputs properly labeled
-- **Example:** `apps/web/components/search/filter-bar.tsx`
+### Tìm Kiếm & Bộ Lọc
+- ✅ Phần bộ lọc có `role="search"`
+- ✅ Tất cả các ô select có `aria-label`
+- ✅ Ô nhập kiểu dải (range) được gắn nhãn đúng chuẩn
+- **Ví dụ:** `apps/web/components/search/filter-bar.tsx`
 
-### Image Gallery
-- ✅ Previous/Next buttons have aria-labels
-- ✅ Good semantic structure
-- **Example:** `apps/web/components/listings/image-gallery.tsx:47, 54`
+### Thư Viện Ảnh
+- ✅ Các nút Trước/Sau có aria-label
+- ✅ Cấu trúc ngữ nghĩa tốt
+- **Ví dụ:** `apps/web/components/listings/image-gallery.tsx:47, 54`
 
 ---
 
-## 📋 TESTING CHECKLIST
+## 📋 DANH SÁCH KIỂM TRA THỬ NGHIỆM
 
-### Before Deployment
-- [ ] Fix dialog component accessibility
-- [ ] Add thumbnail button labels
-- [ ] Add banner role to admin header
-- [ ] Run Lighthouse accessibility audit (target: 90+)
-- [ ] Test with NVDA screen reader
-- [ ] Test keyboard navigation (Tab, Shift+Tab, Enter, Escape)
-- [ ] Verify color contrast ratios
-- [ ] Test theme switching (light/dark mode)
+### Trước Khi Triển Khai
+- [ ] Sửa khả năng tiếp cận của thành phần dialog
+- [ ] Thêm nhãn cho các nút hình thu nhỏ
+- [ ] Thêm vai trò banner vào tiêu đề admin
+- [ ] Chạy kiểm toán khả năng tiếp cận Lighthouse (mục tiêu: 90+)
+- [ ] Kiểm tra với trình đọc màn hình NVDA
+- [ ] Kiểm tra điều hướng bàn phím (Tab, Shift+Tab, Enter, Escape)
+- [ ] Xác minh tỷ lệ tương phản màu sắc
+- [ ] Kiểm tra chuyển đổi giao diện (chế độ sáng/tối)
 
-### Screen Reader Testing (NVDA)
-- [ ] Login form: Can fill fields, hear error messages
-- [ ] Navigation: Can navigate menus, understand current page
-- [ ] Search: Can find and submit search form
-- [ ] Dialogs: Can open, interact, close with Escape key
-- [ ] Image gallery: Can select images, hear which is selected
-- [ ] Mobile menu: Can open/close, toggle working properly
+### Kiểm Tra Trình Đọc Màn Hình (NVDA)
+- [ ] Biểu mẫu đăng nhập: Có thể điền trường, nghe thông báo lỗi
+- [ ] Điều hướng: Có thể điều hướng menu, hiểu trang hiện tại
+- [ ] Tìm kiếm: Có thể tìm và gửi biểu mẫu tìm kiếm
+- [ ] Hộp thoại: Có thể mở, tương tác, đóng bằng phím Escape
+- [ ] Thư viện ảnh: Có thể chọn ảnh, nghe ảnh nào đang được chọn
+- [ ] Menu di động: Có thể mở/đóng, nút chuyển đổi hoạt động bình thường
 
-### Keyboard Navigation
-- [ ] Tab: Moves through all interactive elements in logical order
-- [ ] Shift+Tab: Moves backward through elements
-- [ ] Enter: Activates buttons/links/form submission
-- [ ] Space: Activates buttons, toggles checkboxes
-- [ ] Escape: Closes modals/menus
-- [ ] Arrow keys: Works in dropdowns/carousels
+### Điều Hướng Bàn Phím
+- [ ] Tab: Di chuyển qua tất cả các phần tử tương tác theo thứ tự hợp lý
+- [ ] Shift+Tab: Di chuyển ngược lại qua các phần tử
+- [ ] Enter: Kích hoạt nút/liên kết/gửi biểu mẫu
+- [ ] Space: Kích hoạt nút, bật/tắt hộp kiểm
+- [ ] Escape: Đóng modal/menu
+- [ ] Phím mũi tên: Hoạt động trong dropdown/băng chuyền
 
 ---
 
-## 🎯 Priority Roadmap
+## 🎯 Lộ Trình Ưu Tiên
 
-### Week 1 (40 hours)
-1. **Fix Dialog Component** (2-3 hrs)
-   - [ ] Add role, aria-modal, focus trap, escape handling
-   - [ ] Test with screen reader
+### Tuần 1 (40 giờ)
+1. **Sửa Thành Phần Dialog** (2–3 giờ)
+   - [ ] Thêm role, aria-modal, focus trap, xử lý phím Escape
+   - [ ] Kiểm tra với trình đọc màn hình
 
-2. **Add Thumbnail Labels** (0.5 hrs)
-   - [ ] Add aria-label to thumbnail buttons
-   - [ ] Test
+2. **Thêm Nhãn Hình Thu Nhỏ** (0,5 giờ)
+   - [ ] Thêm aria-label vào các nút hình thu nhỏ
+   - [ ] Kiểm tra
 
-3. **Fix Admin Header** (0.1 hrs)
-   - [ ] Add role="banner"
+3. **Sửa Tiêu Đề Admin** (0,1 giờ)
+   - [ ] Thêm role="banner"
 
-4. **Verify Contrast** (6-8 hrs)
-   - [ ] Extract CSS variables
-   - [ ] Test all combinations
-   - [ ] Document findings
-   - [ ] Adjust if needed
+4. **Xác Minh Tương Phản** (6–8 giờ)
+   - [ ] Trích xuất biến CSS
+   - [ ] Kiểm tra tất cả các tổ hợp
+   - [ ] Ghi lại kết quả
+   - [ ] Điều chỉnh nếu cần
 
-5. **Add Landing Page Label** (0.5 hrs)
-   - [ ] Add visible label to search input
+5. **Thêm Nhãn Trang Đầu** (0,5 giờ)
+   - [ ] Thêm nhãn hiển thị vào ô nhập tìm kiếm
 
-6. **Browser Testing** (8 hrs)
-   - [ ] NVDA testing
-   - [ ] Chrome/Firefox/Safari testing
-   - [ ] Mobile testing
+6. **Kiểm Tra Trình Duyệt** (8 giờ)
+   - [ ] Kiểm tra NVDA
+   - [ ] Kiểm tra Chrome/Firefox/Safari
+   - [ ] Kiểm tra trên thiết bị di động
 
-### Week 2 (20 hours)
-1. **Remove Redundant Labels** (0.5 hrs)
-2. **Additional Skip Links** (2-3 hrs)
-3. **Comprehensive Testing** (8 hrs)
-4. **Fix Any Found Issues** (6 hrs)
+### Tuần 2 (20 giờ)
+1. **Xóa Nhãn Thừa** (0,5 giờ)
+2. **Thêm Liên Kết Bỏ Qua Bổ Sung** (2–3 giờ)
+3. **Kiểm Tra Toàn Diện** (8 giờ)
+4. **Sửa Các Vấn Đề Phát Hiện** (6 giờ)
 
 ---
 
-## 📁 File Reference
+## 📁 Tài Liệu Tham Chiếu Tệp
 
-### Critical Files to Review/Fix
-- `apps/web/components/ui/dialog.tsx` - 🔴 REWRITE NEEDED
-- `apps/web/components/listings/image-gallery.tsx` - 🔴 MINOR FIX NEEDED
-- `apps/web/app/[locale]/(admin)/layout.tsx` - 🟡 ADD ROLE
-- `apps/web/app/globals.css` - 🟡 VERIFY COLORS (not audited)
+### Các Tệp Quan Trọng Cần Xem Xét/Sửa
+- `apps/web/components/ui/dialog.tsx` - 🔴 CẦN VIẾT LẠI
+- `apps/web/components/listings/image-gallery.tsx` - 🔴 CẦN SỬA NHỎ
+- `apps/web/app/[locale]/(admin)/layout.tsx` - 🟡 THÊM ROLE
+- `apps/web/app/globals.css` - 🟡 XÁC MINH MÀU SẮC (chưa kiểm toán)
 
-### Files with Good Accessibility
-- `apps/web/app/[locale]/(public)/layout.tsx` - ✅ EXCELLENT
-- `apps/web/app/[locale]/(auth)/login/page.tsx` - ✅ EXCELLENT
-- `apps/web/app/[locale]/(auth)/register/page.tsx` - ✅ EXCELLENT
-- `apps/web/components/ui/button.tsx` - ✅ GOOD
-- `apps/web/components/ui/input.tsx` - ✅ GOOD
-- `apps/web/components/ui/label.tsx` - ✅ GOOD
-- `apps/web/components/ui/select.tsx` - ✅ GOOD
-- `apps/web/components/search/filter-bar.tsx` - ✅ GOOD
+### Các Tệp Có Khả Năng Tiếp Cận Tốt
+- `apps/web/app/[locale]/(public)/layout.tsx` - ✅ XUẤT SẮC
+- `apps/web/app/[locale]/(auth)/login/page.tsx` - ✅ XUẤT SẮC
+- `apps/web/app/[locale]/(auth)/register/page.tsx` - ✅ XUẤT SẮC
+- `apps/web/components/ui/button.tsx` - ✅ TỐT
+- `apps/web/components/ui/input.tsx` - ✅ TỐT
+- `apps/web/components/ui/label.tsx` - ✅ TỐT
+- `apps/web/components/ui/select.tsx` - ✅ TỐT
+- `apps/web/components/search/filter-bar.tsx` - ✅ TỐT
 
 ---
 
-## 🔍 Code Examples
+## 🔍 Ví Dụ Mã
 
-### Good ARIA Usage Example
+### Ví Dụ Sử Dụng ARIA Tốt
 ```tsx
-// Good: Dynamic aria-label that updates based on state
+// Tốt: aria-label động cập nhật theo trạng thái
 <button
   aria-label={mobileMenuOpen ? t('nav.closeMenu') : t('nav.openMenu')}
   onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
@@ -250,9 +250,9 @@ aria-pressed={index === selectedIndex}
 </button>
 ```
 
-### Form Accessibility Example
+### Ví Dụ Khả Năng Tiếp Cận Biểu Mẫu
 ```tsx
-// Good: Proper label association + error handling
+// Tốt: Liên kết nhãn đúng chuẩn + xử lý lỗi
 <div className="space-y-2">
   <Label htmlFor="phone">{t('phone')}</Label>
   <Input
@@ -268,9 +268,9 @@ aria-pressed={index === selectedIndex}
 </div>
 ```
 
-### Search Form Example
+### Ví Dụ Biểu Mẫu Tìm Kiếm
 ```tsx
-// Good: Proper semantic role with labeled controls
+// Tốt: Vai trò ngữ nghĩa đúng chuẩn với các điều khiển được gắn nhãn
 <form role="search" aria-label={t('filters')}>
   <Select aria-label={t('allTransactions')}>
     {/* options */}
@@ -280,38 +280,38 @@ aria-pressed={index === selectedIndex}
 
 ---
 
-## 📞 Resources
+## 📞 Tài Nguyên
 
-### Documentation
-- Full audit report: `ACCESSIBILITY_AUDIT_2026-04-10.md`
-- Detailed findings on 15 sections
-- File-by-file analysis
-- WCAG 2.1 compliance assessment
+### Tài Liệu
+- Báo cáo kiểm toán đầy đủ: `ACCESSIBILITY_AUDIT_2026-04-10.md`
+- Kết quả chi tiết trên 15 phần
+- Phân tích từng tệp
+- Đánh giá tuân thủ WCAG 2.1
 
-### Testing Tools
-- **Axe DevTools:** Chrome/Firefox extension for quick checks
-- **Lighthouse:** Built into Chrome DevTools
+### Công Cụ Kiểm Tra
+- **Axe DevTools:** Tiện ích mở rộng Chrome/Firefox để kiểm tra nhanh
+- **Lighthouse:** Tích hợp trong Chrome DevTools
 - **WebAIM Contrast Checker:** https://webaim.org/resources/contrastchecker/
-- **NVDA:** Free screen reader - https://www.nvaccess.org/
+- **NVDA:** Trình đọc màn hình miễn phí - https://www.nvaccess.org/
 
-### Learning Resources
+### Tài Nguyên Học Tập
 - [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
 - [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
 - [MDN Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
 
 ---
 
-## 📝 Notes
+## 📝 Ghi Chú
 
-**Audit Scope:** apps/web (Next.js 15 frontend)
-**Files Analyzed:** 90+ TSX/JSX files
-**Time to Achieve AA Compliance:** 4-6 days full-time
-**Ongoing Maintenance:** Add to CI/CD, developer training recommended
+**Phạm vi kiểm toán:** apps/web (giao diện Next.js 15)
+**Số tệp đã phân tích:** 90+ tệp TSX/JSX
+**Thời gian đạt tuân thủ AA:** 4–6 ngày làm toàn thời gian
+**Bảo trì liên tục:** Nên tích hợp vào CI/CD và đào tạo lập trình viên
 
-**Next Steps:**
-1. Review full audit report (1552 lines)
-2. Create Jira tickets for each issue
-3. Assign tasks to development team
-4. Schedule accessibility testing
-5. Plan developer training session
+**Bước tiếp theo:**
+1. Xem xét báo cáo kiểm toán đầy đủ (1552 dòng)
+2. Tạo ticket Jira cho mỗi vấn đề
+3. Phân công nhiệm vụ cho nhóm phát triển
+4. Lên lịch kiểm tra khả năng tiếp cận
+5. Lập kế hoạch buổi đào tạo lập trình viên