Petunjuk dan konteks
Modal harus berperilaku sebagai permukaan yang aktif sementara latar belakang tetap terlihat tetapi tidak tersedia. Implementasi harus mempertahankan pembuka (opener), mendukung kontrol escape dan penutupan, serta menghindari ketergantungan pada labirin tabindex positif.
Apa yang diuji oleh pewawancara
- Pemahaman tentang apa yang diblokir oleh atribut
inertdan apa yang tidak dikonfigurasikannya. - Menggabungkan semantik dialog native, pengelolaan fokus, dan penamaan yang aksesibel.
- Menangani portal bertingkat, pengaturan waktu animasi, dukungan browser, dan reduced motion.
Pertanyaan klarifikasi sebelum menjawab
- Apakah ini dialog modal atau popover non-modal yang mengizinkan interaksi latar belakang?
- Elemen mana yang memiliki dialog tersebut, dan di mana portal dipasang (mounted)?
- Apa yang harus terjadi pada fokus saat buka, batal, kirim (submit), dan tutup?
- Apakah baseline browser tersedia, atau apakah fallback diperlukan untuk klien lama?
Kerangka jawaban 30 detik
Saya akan menggunakan dialog modal native jika memungkinkan, memindahkan fokus ke judul berlabel atau kontrol bermakna pertama, dan hanya menandai shell aplikasi luar sebagai inert saat dialog terbuka. Saya akan memulihkan fokus ke pembuka jika masih ada, menyediakan Escape dan tombol tutup eksplisit, serta menguji jalur keyboard dan pembaca layar (screen reader). inert mencegah interaksi dengan latar belakang; atribut ini tidak menggantikan penamaan dialog, pemulihan fokus, atau pengelolaan status.
Pembahasan mendalam langkah demi langkah
1. Pilih permukaan semantik yang tepat
Gunakan elemen dialog native dengan showModal() untuk modal yang sesungguhnya jika baseline browser memungkinkannya, dan berikan nama yang aksesibel melalui judul yang terlihat atau aria-labelledby. Pengungkapan (disclosure) non-modal tidak boleh membuat seluruh halaman menjadi inert karena pengguna diharapkan dapat berpindah antar permukaan.
2. Isolasi latar belakang
Terapkan inert ke kontainer aplikasi yang berada di luar dialog, bukan ke ancestor bersama yang juga memuat portal dialog. Browser menghapus subtree inert dari navigasi fokus dan mencegah event fokus; browser juga mencegah interaksi normal pengguna. Jangan menyebarkan aria-hidden pada ancestor yang memuat dialog yang sedang difokuskan.
3. Kelola siklus hidup fokus
Tangkap pembuka sebelum membuka. Saat dibuka, fokuskan judul yang stabil atau kontrol tugas pertama daripada ikon tutup sembarangan. Saat pembatalan atau pengiriman berhasil, tutup dialog, hapus inert, dan pulihkan fokus jika pembuka tetap terlihat dan aktif. Jika pembuka telah dihapus, pilih target logis terdekat dan umumkan hasilnya.
4. Tangani portal dan transisi
Render dialog di lapisan tingkat atas agar clipping dan stacking context tidak menjebaknya. Atur inert sebelum mengekspos status modal ke interaksi, dan tunda fokus hingga dialog dipasang. Koordinasikan animasi masuk dan keluar dengan preferensi reduced-motion; jangan pernah membiarkan latar belakang tetap inert setelah transisi terputus.
5. Uji jalur kegagalan
Uji Tab dan Shift+Tab, Escape, aktivasi tombol tutup, error validasi, dialog bertingkat, perubahan rute, dan pengumuman pembaca layar. Verifikasi bahwa klik, fokus terprogram, perilaku find-in-page, dan pointer event sesuai dengan perilaku inert browser. Tambahkan fallback hanya jika rangkaian browser yang didukung memerlukannya, dan hapus saat perilaku native sudah andal.
Contoh jawaban berkualitas tinggi
“Untuk modal sesungguhnya, saya akan menggunakan dialog native, memfokuskan judul berlabel atau kontrol tugas pertamanya, dan menyetel inert pada shell aplikasi luar daripada pada ancestor portal yang memuat dialog. Saya akan menangkap pembuka, memulihkan fokus setelah ditutup, mendukung Escape dan tombol tutup eksplisit, serta menjaga semantik penamaan dan validasi tetap terpisah dari inertness. Saya akan menguji jalur keyboard, pembaca layar, portal, animasi, dan perubahan rute, termasuk membersihkan status inert setelah transisi yang terputus.”
Kesalahan umum
- Menyetel inert pada root aplikasi yang memuat portal → dialog juga menjadi inert → pasang dialog di luar subtree inert.
- Menggunakan inert sebagai sistem pengelolaan fokus → fokus masih dapat mendarat di tempat yang salah saat buka atau tutup → tentukan siklus hidup fokus yang lengkap.
- Menyembunyikan latar belakang dengan aria-hidden saat masih memuat fokus → teknologi asistif melihat status yang tidak konsisten → pindahkan fokus terlebih dahulu dan gunakan inert pada latar belakang.
- Melupakan transisi yang terputus → halaman tetap terkunci → bersihkan status inert di setiap jalur penutupan dan pelepasan (unmount).
Pertanyaan lanjutan dan tanggapan
Apakah inert menggantikan focus trap?
Atribut ini mencegah latar belakang agar tidak dapat difokuskan, sehingga modal sering kali dapat menghindari trap manual. Anda tetap perlu menempatkan fokus awal, memulihkannya, menamai dialog, dan menangani fallback browser atau komponen.
Bisakah drawer non-modal menggunakan inert?
Hanya jika produk sengaja membuat latar belakang tidak tersedia. Untuk drawer non-modal yang mengizinkan interaksi latar belakang, jangan tandai halaman sebagai inert; gunakan semantik pengungkapan yang sesuai sebagai gantinya.
Bagaimana jika pembuka menghilang?
Pulihkan fokus ke kontrol logis terdekat, seperti baris yang diperbarui atau judul halaman, dan umumkan hasilnya bila diperlukan. Jangan pernah mencoba memfokuskan elemen yang terlepas atau dinonaktifkan.