Modal
Mendesain modal konfirmasi dengan purpose, close action, dan contract yang jujur tentang focus behavior yang harus diuji saat runtime.
Tujuan belajar
- Memilih modal hanya untuk keputusan atau task yang membutuhkan interruption sementara
- Menyusun dialog dengan title, description, dan action yang sesuai risiko task
- Menjelaskan focus entry, containment, Escape, close action, serta focus return
- Membedakan structure statis dari behavior modal yang wajib diuji saat runtime
Isi lesson
6 blok- 1.Modal harus menyelesaikan satu interruption yang jelasBelum selesaiWajib
- 2.Confirm dialog dengan action yang dapat dibacaBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menandai aria-modal bila background masih interaktifBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Modal harus menyelesaikan satu interruption yang jelas
WajibModal cocok untuk keputusan sementara seperti mengonfirmasi penghapusan draft. Ia bukan tempat default untuk informasi, navigation, atau form panjang. Bila content dapat berada di page, drawer, atau route tersendiri, pilihan itu sering lebih mudah dibagikan, direfresh, dan dioperasikan keyboard. Setiap modal menambah state open/close, fokus, scroll, serta recovery yang perlu dimiliki feature owner.
Dialog reusable perlu contract sempit: apakah terbuka, title, description singkat, content area, cancel action, dan confirm action. Tetapi role=dialog tidak otomatis menyelesaikan modal. Focus harus masuk ke dialog saat terbuka, Tab dan Shift+Tab tidak boleh keluar, Escape serta close action harus memiliki aturan, background harus inert, dan focus biasanya kembali ke trigger setelah ditutup. Practice memeriksa structure; runtime behavior wajib diuji pada local project atau primitive dialog teruji.
Bagian ini memengaruhi progres lesson.
Confirm dialog dengan action yang dapat dibaca
Wajibtype CourseConfirmDialogProps = {
isOpen: boolean;
title: string;
description: string;
onCancel: () => void;
onConfirm: () => void;
};
export function CourseConfirmDialog({ isOpen, title, description, onCancel, onConfirm }: CourseConfirmDialogProps) {
if (!isOpen) return null;
return (
<section role="dialog" aria-modal="true" aria-labelledby="confirm-title" aria-describedby="confirm-description">
<h2 id="confirm-title">{title}</h2>
<p id="confirm-description">{description}</p>
<button type="button" onClick={onCancel} autoFocus>Batal</button>
<button type="button" onClick={onConfirm}>Hapus draft</button>
</section>
);
}Title dan description memberi nama serta context dialog. Batal dapat menjadi focus awal pada confirm destructive yang kecil. Contoh ini belum mengklaim production-ready: focus loop, background inert, Escape, scroll behavior, dan focus return harus ditangani serta diuji saat runtime.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususAudit course confirm dialog
Bangun structure confirm dialog dengan state open, label, description, safe cancel action, dan destructive confirm action.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Setelah modal penghapusan draft ditutup dengan Batal, focus biasanya harus
Progres lesson naik setelah jawaban benar.
Peringatan
OpsionalJangan menandai aria-modal bila background masih interaktif
aria-modal=true menyatakan content di luar dialog tidak dapat diakses. Jika code masih membiarkan pointer atau keyboard berinteraksi dengan page belakang, user menerima pengalaman saling bertentangan. Gunakan primitive teruji atau implementasikan behavior modal lengkap sebelum menyebutnya modal.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Modal adalah interruption untuk satu keputusan atau task yang jelas.
- Dialog membutuhkan title, context, close path, dan action yang sesuai risiko task.
- Focus entry, containment, Escape, background inert, serta focus return adalah behavior runtime.
- API kecil membuat feature owner tetap bertanggung jawab pada flow serta outcome user.
- Berikutnya, toast memberi feedback singkat tanpa meminta keputusan aktif.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Modal harus menyelesaikan satu interruption yang jelas.