59272e9321
Root directory had accumulated audit/exploration markdown files cluttering the project root. Moved all audit-related files to docs/audits/ with a README.md index, and updated cross-references in K6_LOAD_TESTING_GUIDE.md and README_FRONTEND_DOCS.md. Co-Authored-By: Paperclip <noreply@paperclip.ing>
64 lines
3.9 KiB
Plaintext
64 lines
3.9 KiB
Plaintext
╔════════════════════════════════════════════════════════════════════════════════════╗
|
|
║ GOODGO FRONTEND ACCESSIBILITY - FIXES REQUIRED ║
|
|
║ QUICK REFERENCE ║
|
|
╚════════════════════════════════════════════════════════════════════════════════════╝
|
|
|
|
TOTAL ISSUES FOUND: 5 specific problems requiring code fixes
|
|
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
|
|
CRITICAL FIXES (Priority 1-2):
|
|
|
|
1. ✗ FILE UPLOAD INPUT - MISSING aria-label
|
|
Location: apps/web/components/listings/image-upload.tsx:118
|
|
Fix: Add aria-label="Chọn ảnh để tải lên"
|
|
|
|
2. ✗ SEARCH DIALOG INPUT - MISSING aria-label
|
|
Location: apps/web/app/[locale]/(public)/search/page.tsx:189
|
|
Fix: Add aria-label="Tên bộ lọc tìm kiếm"
|
|
|
|
3. ✗ ADMIN TABLE HEADER CHECKBOX - MISSING aria-label
|
|
Location: apps/web/app/[locale]/(admin)/admin/moderation/page.tsx:222
|
|
Fix: Add aria-label="Chọn tất cả tin đăng"
|
|
|
|
4. ✗ ADMIN TABLE ROW CHECKBOXES - MISSING aria-label
|
|
Location: apps/web/app/[locale]/(admin)/admin/moderation/page.tsx:242
|
|
Fix: Add aria-label with dynamic content (per row)
|
|
|
|
5. ✗ TEST MOCK IMAGE - MISSING alt in props
|
|
Location: apps/web/app/[locale]/(public)/search/__tests__/search.spec.tsx:46
|
|
Fix: Add alt={props.alt || ''} to mock component
|
|
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
|
|
ENHANCEMENT (Priority 3):
|
|
|
|
6. ⚠ IMAGE UPLOAD DRAG-DROP AREA - Limited keyboard accessibility
|
|
Location: apps/web/components/listings/image-upload.tsx:86-128
|
|
Enhancement: Add role="button" + tabIndex + onKeyDown + aria-label to div
|
|
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
|
|
ITEMS VERIFIED AS COMPLIANT (NO CHANGES NEEDED):
|
|
|
|
✅ Image components with alt attributes (6 files verified)
|
|
✅ Icon-only buttons with aria-label (2 locations verified)
|
|
✅ Dialogs with semantic titles (2 locations verified)
|
|
✅ Checkboxes with associated labels (1 location verified)
|
|
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
|
|
IMPLEMENTATION STEPS:
|
|
|
|
[ ] Step 1: Fix file upload input aria-label (image-upload.tsx)
|
|
[ ] Step 2: Fix search dialog input aria-label (search/page.tsx)
|
|
[ ] Step 3: Fix admin moderation checkboxes (moderation/page.tsx)
|
|
[ ] Step 4: Fix test mock Image component (search.spec.tsx)
|
|
[ ] Step 5: (Optional) Enhance image upload drag-drop accessibility
|
|
[ ] Step 6: Run accessibility tests (axe, lighthouse, screen reader testing)
|
|
[ ] Step 7: Verify WCAG 2.1 Level AA compliance
|
|
|
|
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
|
|
For detailed code snippets and exact fixes, see: ACCESSIBILITY_FIXES_REPORT.md
|