proto.lib

<dialog> và popover: modal không cần tự viết JS

Phần tử <dialog> với showModal() và attribute popover cho phép trình duyệt tự lo top layer, ::backdrop, focus trap và đóng bằng Esc; khác biệt then chốt là dialog modal chặn tương tác nền còn popover (kể cả non-modal) thì không, và cả hai đều hỗ trợ light-dismiss khi click ra ngoài.

ApplicationTrung bình2026-08-27
<dialog> và popover: modal không cần tự viết JS

Tags

#dialog#popover#modal#top-layer#focus-trap#accessibility#html

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationTrung bình

Quản lý focus khi chuyển route trong SPA

Single-page app không reload trang khi đổi route, nên focus vẫn ở vị trí cũ, tiêu đề trang không đổi và trình đọc màn hình không thông báo gì; app phải tự chuyển focus tới heading của view mới, đổi document title và announce qua live region, đồng thời trap focus trong modal và trả lại đúng phần tử trigger khi đóng.

#accessibility#focus-management#spa-routing#aria-live
ApplicationNâng cao

Command Palette: điều hướng bàn phím và focus trap

Command palette mở bằng shortcut, focus bị trap trong overlay; phím mũi tên di chuyển một con trỏ ảo trong khi input vẫn giữ focus, quan hệ được công bố cho screen reader qua aria-activedescendant, kết quả xếp hạng theo fuzzy match kết hợp recency, và Escape trả focus về đúng phần tử trước đó.

#command-palette#keyboard-navigation#focus-trap#aria-activedescendant
ApplicationTrung bình

Nhận file qua Paste và Drop (không cần file picker)

Sự kiện paste có thể mang một ảnh clipboard (clipboardData.items), còn drop có thể mang files, một directory, hoặc chỉ một URL text — handler phải kiểm tra dataTransfer/clipboardData thực tế nhận được rồi mới validate type/size, sinh preview, và luôn preventDefault để tránh trình duyệt tự điều hướng khi thả file ngoài vùng đích.

#clipboard-api#drag-and-drop#datatransfer#file-upload