Modal dan Overlay — Fokus Perhatian User

Modal (dialog) adalah overlay yang muncul di atas konten utama, meminta perhatian atau input dari user.

Kapan Menggunakan Modal

Baik:

• Konfirmasi aksi destruktif ("Yakin hapus?")
• Form singkat (login, quick edit)
• Preview konten (gambar, video)
• Alert penting

Hindari:

• Form panjang (lebih baik halaman baru)
• Informasi yang sering diakses
• Modal di atas modal (nested modal)

Struktur Modal yang Baik

<dialog class="modal" aria-labelledby="modal-title">
  <div class="modal-header">
    <h2 id="modal-title">Konfirmasi Hapus</h2>
    <button aria-label="Tutup" class="close-btn">&times;</button>
  </div>
  <div class="modal-body">
    <p>Apakah kamu yakin ingin menghapus item ini?</p>
  </div>
  <div class="modal-footer">
    <button class="btn-ghost">Batal</button>
    <button class="btn-primary">Hapus</button>
  </div>
</dialog>

Accessibility Modal

1. <dialog> element — semantic HTML5 element untuk modal
2. aria-labelledby — menghubungkan modal ke judulnya
3. Focus trap — Tab hanya berpindah antar elemen di dalam modal
4. Escape to close — tekan Esc menutup modal
5. Return focus — setelah modal ditutup, fokus kembali ke elemen yang membuka

Backdrop

.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

Pola Lain

• Drawer — panel yang slide dari samping (navigasi mobile, filter)
• Tooltip — info kecil saat hover
• Popover — konten yang muncul saat klik (dropdown menu)
• Toast — notifikasi singkat yang auto-dismiss

Airbnb menggunakan modal untuk booking flow — langkah demi langkah dalam modal, dengan clear progress indicator.