Bảng điểm: learn /ielts/reading (SRC-1303)
Màn: trang kỹ năng Reading của sân luyện IELTS (cùng khuôn với /ielts/listening, /ielts/writing, /ielts/speaking). Mã nguồn: apps/learn/src/ielts/Reading.tsx (ReadingHome), anh em Listening.tsx, Production.tsx. Chuẩn: focus-and-load.md. Skill: /ui-audit-25. Bản ngắn: chấm qua mã + Playwright 375 x 812 và 1440 x 900 với mockApi.
| Lượt | Ngày | Điểm | Ghi chú |
|---|---|---|---|
| 0 (trước khi sửa) | 09.10.2026 | 42/50 | đo bằng Playwright |
| 1 (sau lô 1) | 09.10.2026 | 45/50 | lô 1 dưới đây |
| 2 (sau lô 2) | 09.10.2026 | 50/50 | lô 2 dưới đây; đo lại bằng Playwright 375/1440 |
Hai câu bắt buộc
- Nhìn đâu trước? (lượt 0) không có h1: thứ đầu tiên là thẻ "Where am I strong?" (10 dòng sub-skill). Ở 375px thẻ ấy chiếm trọn tầm nhìn đầu; ô chính "Keep going / Read a passage" ở dưới nếp gấp (F3). Ở 1440px ô chính ở y=696, dưới thẻ mastery và vạch "What to do now".
- Bao nhiêu thứ? (lượt 0) 375px: một khối (thẻ mastery) lấp đầy màn. Vệt đường dẫn "Reading" là chỗ duy nhất nói tên trang.
- Sau lô 1: h1 "Reading" (y=174 ở 375px), vệt dừng ở gốc nên tên trang nói một lần. Ô chính vẫn dưới nếp gấp ở 375px (xem "Còn lại").
- Sau lô 2: ở 375px mắt đi h1 "Reading" → ô chính "Keep going" (một nút/ô tô màu) → thẻ mastery → dòng video gập. Tầm nhìn đầu có 2 khối (h1, ô chính) cộng phần đầu thẻ mastery. Ở 1440px thứ tự không đổi so với lượt 1. Không gì nói hai lần.
25 yếu tố
| # | Yếu tố | Lượt 0 | Lượt 1 | Lượt 2 | Bằng chứng / luật |
|---|---|---|---|---|---|
| 1 | Information Architecture | partial | pass | pass | tên trang chỉ ở vệt; nay h1 "Reading" và vệt không lặp (L5), e2e ieltsHubsLayout.spec.ts |
| 2 | Navigation | pass | pass | pass | thanh bước sáng "Practise" |
| 3 | Layout | pass | pass | pass | không thẻ trạng thái ở trang luyện (F7) |
| 4 | Visual Hierarchy | fail | partial | pass | ở 375px ô chính "Keep going" ngay dưới h1, trước thẻ mastery (F3, chủ dự án quyết 09.10.2026); 1440px giữ thứ tự cũ; e2e ieltsAuditPass3.spec.ts so y ở cả hai cỡ |
| 5 | Responsive Design | partial | partial | pass | 375px: tầm nhìn đầu là h1 + ô chính (data-part=hub-primary-phone), bản trong lưới hidden lg:block nên chỉ một ô chính hiện (e2e đếm [data-hub-primary] hiện = 1) |
| 6 | Interaction Pattern | pass | pass | pass | ô HubTile cả ô là link |
| 7 | User Flow | partial | partial | pass | việc chính bấm được không cần cuộn ở 375px |
| 8 | Affordance | pass | pass | pass | ô khoá nói vì sao khoá |
| 9 | Feedback | pass | pass | pass | thanh mastery có nhãn "Solid" |
| 10 | State | pass | pass | pass | khoá "Word list" theo mastery, có câu đếm |
| 11 | Design System | pass | pass | pass | shadcn, token |
| 12 | Components | pass | pass | pass | HubTile, MasteryCard, ExamPracticeBand dùng chung bốn trang |
| 13 | UI Patterns | pass | pass | pass | hub ba ô + dải luyện đề |
| 14 | Forms | pass | pass | pass | không có form |
| 15 | Data Display | pass | pass | pass | số cụm, số bài có đơn vị |
| 16 | Onboarding | partial | partial | pass | video gập thành một dòng (IeltsClip bỏ shown, e2e video = 0); tour whenInView: chỉ tự mở khi đỉnh thẻ mastery đã vào tầm nhìn, không tự cuộn (e2e scrollY = 0 sau 1,2s; cuộn tới thẻ thì tour mở và scrollY không đổi) |
| 17 | Empty State | pass | pass | pass | chưa có bài thì dẫn sang danh sách cụm |
| 18 | Error Handling | partial | partial | pass | useSkillPageState + state của cụm: hỏng thì dòng role=alert tiếng Việt "Chưa tải được dữ liệu" + nút "Thử lại" (e2e chặn API, bấm thử lại, dòng biến mất) |
| 19 | Accessibility | partial | pass | pass | không h1 cho trình đọc màn hình → có một h1 |
| 20 | Personalization | pass | pass | pass | bài kế tiếp theo server |
| 21 | Typography | pass | pass | pass | h1 text-2xl một dòng |
| 22 | Color | pass | pass | pass | một màu nhấn |
| 23 | Spacing | pass | pass | pass | thang |
| 24 | Iconography | pass | pass | pass | icon lucide |
| 25 | Motion | pass | pass | pass | FadeIn, Stagger từ preset |
Lô đã sửa
| Lô | Ngày | PR | Yếu tố | Thay đổi |
|---|---|---|---|---|
| 1 | 09.10.2026 | session/ui-audit-pass2 | 1, 4 (một phần), 19 | h1 tiếng Anh ở cả bốn trang kỹ năng (Reading, Listening, Writing practice, Speaking practice); vệt dừng ở gốc để không lặp |
| 2 | 09.10.2026 | session/ui-audit-pass3 | 4, 5, 7, 16, 18 | chủ dự án quyết 09.10.2026: dưới lg ô chính lên trước thẻ mastery (PrimaryFirstOnPhone), desktop giữ nguyên; video gập; tour whenInView không tự cuộn; dòng lỗi + "Thử lại". Cùng sửa ở Listening, Writing practice, Speaking practice (chung Hub.tsx) |
Còn lại
Không còn yếu tố partial hay fail.
- Về h1: lô 1 đưa h1 lại (SRC-878 từng bỏ nó vì lặp vệt). Vệt nay không lặp tên trang và h1 một dòng
text-2xl; nếu chủ dự án vẫn muốn bỏ hẳn tiêu đề thì đổiieltsHubsLayout.spec.tsvàieltsExamParts.spec.ts. - Ở 375px ô chính có HAI bản trong DOM (một bản
lg:hiddendưới h1, một bảnhidden lg:blocktrong lưới), chỉ một bản hiện ở mỗi cỡ màn nên trình đọc màn hình chỉ gặp một. Chọn cách này thay vìorderCSS để thứ tự DOM khớp thứ tự nhìn (F7). - Dòng video gập nay gập ở cả desktop, không chỉ ở điện thoại: một video bày sẵn vẫn tranh chỗ với việc chính ở mọi cỡ màn.