Quản lý Focus trong Angular: Bí quyết xử lý Dialog, Drawer và điều hướng mà không làm mất trải nghiệm người dùng

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

• Quản lý focus là yếu tố then chốt để đảm bảo tính truy cập (Accessibility) cho ứng dụng Angular.
• Sử dụng CDK Overlay và các kỹ thuật quản lý focus thủ công giúp tránh tình trạng người dùng bị lạc trong giao diện.
• Cần thiết lập chiến lược trả lại focus (focus restoration) sau khi đóng các thành phần overlay hoặc thay đổi route.

Trong thế giới phát triển ứng dụng web hiện đại, việc xây dựng các thành phần UI phức tạp như Dialog, Drawer hay Modal là điều hiển nhiên. Tuy nhiên, một lỗi nghiêm trọng mà nhiều lập trình viên thường bỏ qua chính là việc quản lý tiêu điểm (focus management). Khi bạn mở một Dialog, nếu focus không được đưa vào bên trong, người dùng sử dụng bàn phím sẽ bị kẹt lại ở các phần tử phía sau. Ngược lại, khi đóng Dialog, nếu focus không quay trở lại vị trí cũ, người dùng sẽ bị "rơi tự do" về đầu trang, gây ra sự ức chế cực độ. Đây không chỉ là vấn đề UX, mà còn là rào cản lớn đối với các tiêu chuẩn Accessibility (A11y).

Tại sao Focus Management lại quan trọng?

Việc điều hướng bằng bàn phím là phương thức chính của nhiều người dùng khiếm thị hoặc những người ưu tiên thao tác nhanh. Khi một thành phần overlay xuất hiện, trình duyệt cần hiểu rằng ngữ cảnh hiện tại đã thay đổi. Nếu bạn đang xây dựng các hệ thống phức tạp, việc tối ưu hóa trải nghiệm người dùng cũng quan trọng như việc bạn tối ưu hóa quy trình phát triển vậy.

Cơ chế hoạt động của Focus trong Angular

Angular cung cấp CDK (Component Dev Kit) cực kỳ mạnh mẽ để xử lý vấn đề này. Tuy nhiên, nếu bạn tự xây dựng các thành phần tùy chỉnh, bạn cần nắm vững các bước sau:

1. Lưu trữ focus hiện tại: Trước khi mở overlay, hãy lưu lại phần tử đang giữ focus (document.activeElement).
2. Chuyển hướng focus: Khi overlay mở, ép buộc focus vào phần tử đầu tiên bên trong container của overlay.
3. Khóa focus (Focus Trap): Ngăn chặn người dùng tab ra ngoài phạm vi của overlay.
4. Khôi phục focus: Khi đóng overlay, trả focus về phần tử đã lưu ở bước 1.

Bảng so sánh các chiến lược quản lý Focus

Mẹo hay: Hãy luôn sử dụng cdkFocusInitial trên phần tử bạn muốn nhận focus đầu tiên trong Dialog để tiết kiệm thời gian viết code thủ công.

Xử lý Focus khi thay đổi Route

Một vấn đề khác là khi người dùng chuyển trang. Trong các ứng dụng Single Page Application (SPA), trình duyệt không tự động đưa focus lên đầu trang mới. Điều này khiến người dùng sử dụng trình đọc màn hình (screen reader) bị mất phương hướng. Bạn có thể giải quyết bằng cách lắng nghe sự kiện NavigationEnd và ép focus vào một thẻ <h1> hoặc một container chính.

Nếu bạn đang quan tâm đến việc xây dựng CLI tự động đánh giá sức khỏe dự án Angular, hãy cân nhắc thêm các rule kiểm tra tính truy cập (A11y) vào bộ quy tắc của bạn.

Đánh giá & Lời khuyên Thực tiễn

Từ góc nhìn của một Tech Lead, việc quản lý focus không nên là một suy nghĩ sau cùng (afterthought).

• Ưu điểm: Cải thiện đáng kể điểm số Lighthouse về Accessibility, tăng độ chuyên nghiệp cho sản phẩm.
• Nhược điểm: Tốn thời gian phát triển ban đầu, yêu cầu hiểu biết sâu về DOM.
• Lời khuyên: Hãy sử dụng thư viện a11y có sẵn trong Angular CDK thay vì tự viết lại từ đầu. Nếu bạn đang quản lý các hệ thống SaaS, việc đảm bảo tính truy cập cũng là cách để chủ động giám sát SaaS và nâng cao uy tín thương hiệu.

Lưu ý: Tránh việc ép buộc focus quá mức gây khó chịu cho người dùng bình thường. Chỉ nên áp dụng cho các thành phần mang tính chất chặn (blocking) như Dialog.

Câu hỏi thường gặp (FAQ)

Tại sao tôi không nên dùng tabindex="-1" cho mọi thứ?

Việc lạm dụng tabindex sẽ làm hỏng thứ tự tab tự nhiên của trình duyệt. Chỉ sử dụng nó cho các phần tử không thể focus được nhưng cần nhận focus thông qua lập trình.

Làm sao để biết focus đang ở đâu trong ứng dụng?

Bạn có thể sử dụng document.activeElement trong console của trình duyệt để kiểm tra phần tử nào đang nhận focus tại thời điểm hiện tại.

Có cách nào tự động hóa kiểm tra focus không?

Có, hãy tích hợp các công cụ như cypress-axe vào quy trình Automated Testing để phát hiện các lỗi vi phạm Accessibility ngay trong quá trình CI/CD.

Kết luận

Quản lý focus trong Angular là một kỹ năng cần thiết để nâng tầm chất lượng ứng dụng. Bằng cách áp dụng đúng các nguyên tắc của Angular CDK và chú trọng đến trải nghiệm điều hướng, bạn sẽ tạo ra những sản phẩm không chỉ đẹp mà còn thân thiện với mọi người dùng. Hãy bắt đầu refactor lại các Dialog của bạn ngay hôm nay và đừng quên theo dõi hi_dev để cập nhật những kiến thức kỹ thuật chuyên sâu nhất.