Perintah dan konteks
Sebuah konsol admin memerlukan konfirmasi destruktif dan formulir alasan. Beberapa alur hanya boleh ditutup melalui tindakan eksplisit; yang lain dapat ditutup dengan Escape atau klik di luar. Rancang kebijakan penutupan elemen dialog native untuk jalur keyboard, sentuhan, dan validasi.
MDN mendefinisikan nilai closedby yaitu none, closerequest, dan any: hanya mekanisme pengembang, permintaan penutupan platform ditambah mekanisme pengembang, atau ketiga mekanisme tersebut. Dialog modal menggunakan showModal(); dialog non-modal menggunakan show().
Apa yang diuji oleh pewawancara
Kandidat harus memetakan risiko bisnis ke kebijakan penutupan, membedakan dialog modal dari popover, dan menjelaskan Escape, light dismiss, close(), requestClose(), method="dialog", fokus awal, pemulihan fokus, serta validasi formulir.
Pertanyaan klarifikasi untuk diajukan terlebih dahulu
- Bolehkah konfirmasi destruktif ditutup secara tidak sengaja, dan apakah input yang belum disimpan harus tetap ada?
- Apakah Escape atau klik di luar setara dengan pembatalan, atau apakah memerlukan konfirmasi lain?
- Haruskah tombol batal melewati validasi field wajib (required)?
- Haruskah browser yang tidak mendukung menyediakan perilaku penutupan yang identik?
- Ke mana fokus harus kembali saat dialog ditutup?
Kerangka jawaban 30 detik
"Untuk tindakan destruktif saya menggunakan showModal() dengan closedby="closerequest", atau none untuk konfirmasi yang paling ketat, ditambah tombol batal dan konfirmasi yang eksplisit. Panel informasi berisiko rendah dapat menggunakan any atau popover="auto". Formulir dengan method="dialog" mengembalikan nilai; tombol batal dapat menggunakan formnovalidate jika harus melewati validasi. Saya menetapkan fokus awal secara terarah dan memulihkan fokus ke pemicu. Deteksi kapabilitas menyediakan fallback tombol eksplisit dan keyboard manual."
Pembahasan mendalam langkah demi langkah
Langkah 1: Pilih modal atau non-modal
showModal() membuat sisa dokumen menjadi inert dan cocok untuk konfirmasi destruktif atau pekerjaan wajib. show() membiarkan halaman tetap interaktif untuk panel tambahan. Mengubah atribut open saja tidak membentuk semantik fokus modal dan latar belakang.
Langkah 2: Petakan risiko ke closedby
closedby="none" hanya mengizinkan penutupan yang ditentukan pengembang dan cocok untuk konfirmasi yang tidak dapat dibatalkan (irreversible). closerequest juga menerima Escape atau permintaan penutupan platform. any menambahkan light dismiss klik di luar dan cocok untuk informasi berisiko rendah.
<dialog id="delete-dialog" closedby="closerequest">
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Delete</button>
</form>
</dialog>Langkah 3: Tangani Escape, request-close, dan close
Escape atau gestur platform merupakan permintaan penutupan. requestClose() dapat menjalankan jalur request-close sehingga aplikasi dapat mengonfirmasi atau mencegatnya. close() menutup secara langsung dan dapat menyetel returnValue. Jangan pernah mengartikan Escape sebagai penghapusan yang dikonfirmasi.
Langkah 4: Kelola dan pulihkan fokus
Saat modal terbuka, fokuskan input terbaik, tombol batal, atau tajuk; jangan letakkan tabindex pada elemen dialog. Saat ditutup, kembalikan fokus ke pemicu, atau ke pengganti yang stabil jika pemicu telah dihapus.
Langkah 5: Gunakan form method=dialog secara terarah
method="dialog" menutup dialog dan mempertahankan status kontrol formulir tanpa mengirim permintaan jaringan; value tombol menjadi returnValue. Jika pembatalan harus melewati validasi wajib, gunakan formnovalidate atau close() eksplisit agar pengguna tidak pernah terjebak.
Langkah 6: Bedakan dialog dari Popover
Popover bersifat non-modal dan berada di top layer. popover="auto" mendukung light dismiss; manual tetap terbuka hingga disembunyikan secara eksplisit dan memungkinkan beberapa popover independen. Jangan gunakan popover jika kelembaman modal (modal inertness) diperlukan.
Langkah 7: Deteksi dukungan dan sediakan fallback
Periksa dukungan HTMLDialogElement, showModal, dan closedby. Tanpa dukungan tersebut, sediakan kontrol eksplisit, penanganan Escape manual, manajemen fokus, dan pemblokiran latar belakang. Fallback harus mempertahankan kontrak pembatalan dan konfirmasi yang sama.
Langkah 8: Uji penutupan dan aksesibilitas
Uji Tab, Escape, klik di luar, sentuhan, validasi gagal, pembukaan berulang, banyak modal, gestur kembali, dan browser lama. Catat alasan penutupan (confirm, cancel, escape, light-dismiss) dan gunakan pembaca layar untuk memverifikasi penamaan, status, dan pergerakan fokus.
Contoh jawaban berkualitas tinggi
"Konfirmasi destruktif menggunakan showModal() dan closedby="closerequest"; alur yang paling ketat menggunakan none dengan tombol batal eksplisit. Informasi berisiko rendah dapat menggunakan any atau popover="auto". method="dialog" mengembalikan hasil, dan pembatalan dapat melewati validasi jika sesuai. Saya menetapkan fokus awal, memulihkan fokus pemicu, mendeteksi dukungan, dan beralih ke kontrol eksplisit serta penanganan keyboard/fokus manual. Pengujian mencakup setiap sumber penutupan dan teknologi asistif."
Kesalahan umum
- Menggunakan any untuk setiap dialog → tindakan destruktif tertutup secara tidak sengaja → petakan closedby ke tingkat risiko.
- Menambahkan tabindex ke dialog → semantik fokus menjadi salah → fokuskan kontrol dalam atau tajuk.
- Memperlakukan close sama seperti requestClose → logika konfirmasi terlewatkan → bedakan penutupan yang diminta dan langsung.
- Membuat tombol batal pada formulir wajib gagal validasi → pengguna terjebak → gunakan formnovalidate atau close.
- Mengganti modal dengan popover → latar belakang tetap interaktif → gunakan showModal saat kelembaman (inertness) diperlukan.
- Hanya menguji dengan mouse → pengguna keyboard dan sentuh tidak dapat keluar → cakup Escape, Tab, klik di luar, dan pembaca layar.
Pertanyaan lanjutan dan respons yang kuat
Pertanyaan lanjutan 1: Apa perbedaan utama antara closerequest dan none?
closerequest menerima Escape atau permintaan penutupan platform selain kontrol pengembang; none hanya menerima kontrol pengembang dan cocok untuk tindakan yang tidak dapat dibatalkan.
Pertanyaan lanjutan 2: Mengapa showModal lebih andal daripada open?
Ini membentuk status modal, kelembaman latar belakang (background inertness), dan perilaku fokus browser. Hanya menyetel open akan membuat dialog non-modal.
Pertanyaan lanjutan 3: Berapa returnValue setelah Escape?
Escape tidak mewakili nilai tombol kirim kecuali aplikasi menyetelnya. Catat alasan penutupan secara terpisah sebagai escape atau request-close.
Pertanyaan lanjutan 4: Bagaimana pembatalan dapat melewati validasi wajib?
Letakkan formnovalidate pada kontrol batal atau panggil close("cancel"); pertahankan validasi normal pada konfirmasi.
Pertanyaan lanjutan 5: Apa fallback untuk browser lama?
Sediakan kontrol buka/tutup eksplisit dan kelola Escape, penangkapan fokus (focus trapping), pemblokiran latar belakang, dan alasan penutupan secara manual. Pertahankan pengujian kontrak yang sama saat dukungan native dipulihkan.