╔════════════════════════════════════════════════════════════════════════════════════╗
║                 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