Frontend & giao diện
7 bài viết gắn thẻ #accessibility trên DiCodeWeb, từ nền tảng đến production, mới nhất trước.
7 bàiCập nhật 8 thg 9, 2026
Khi phần tử native không còn đủ, ARIA là một bản hợp đồng bạn phải giữ. Accessibility tree và cách tính accessible name, roving tabindex hay aria-activedescendant, dựng combobox và tabs từng bước, live region thực sự lên tiếng, focus khi đổi route và cách kiểm thử tất cả.
Hook headless với prop getter, compound component dùng context, asChild và render prop, useControllableState cho controlled và uncontrolled, bàn phím và ARIA như một phần của API, cái giá của polymorphism trong TypeScript, và khi nào nên dùng Radix, React Aria hay Base UI thay vì tự viết.
Một ô gợi ý tìm kiếm trông đơn giản nhưng gom đủ mọi bài toán khó của frontend: race condition, debounce, cache, trạng thái không nhấp nháy, WAI-ARIA combobox, gõ tiếng Việt bằng IME và cách test. Bài này xây từng phần bằng React + TypeScript.
Cách mình thiết kế và xây UI cho những tính năng mà mỗi lần chạy lại ra một kết quả khác: ngân sách độ trễ và streaming, gợi ý có thể chấp nhận, sửa hoặc bỏ qua với state model có type, undo và preview, nguồn trích dẫn trung thực, feedback nối vào analytics, xử lý lỗi và accessibility.
Phần frontend khi gửi file cho LLM: file input, kéo thả và paste, nhận diện loại file bằng magic bytes, thu nhỏ ảnh và xoá EXIF ngay trên trình duyệt, ảnh HEIC từ iPhone, PDF, ghi âm bằng MediaRecorder, upload qua presigned URL có progress và huỷ, dọn object URL, accessibility và những gì server vẫn phải kiểm tra.
Tự tay viết một virtual list bằng React + TypeScript: toán windowing với số liệu cụ thể, overscan, chiều cao thay đổi với prefix sum và binary search, đo bằng ResizeObserver, chống giật khi scroll, accessibility — và khi nào không nên virtualize.
Từ showModal(), top layer, ::backdrop đến quản lý focus, gắn nhãn, khoá cuộn, đóng khi bấm nền và dialog lồng nhau — kèm một component React nhỏ và cách tự kiểm tra bằng bàn phím và screen reader.