Gesaan dan persekitaran
Modal mesti bertindak sebagai permukaan aktif sementara latar belakang kekal kelihatan tetapi tidak boleh digunakan. Pelaksanaan harus mengekalkan pembuka (opener), menyokong kawalan escape dan tutup, serta mengelak daripada bergantung pada kekusutan tabindex positif.
Perkara yang diuji oleh penemu duga
- Memahami perkara yang disekat oleh atribut
inertdan perkara yang tidak dikonfigurasikannya. - Menggabungkan semantik dialog natif, pengurusan fokus, dan penamaan yang mudah diakses.
- Mengendalikan portal bersarang, pemasaan animasi, sokongan pelayar, dan reduced motion.
Soalan penjelasan sebelum menjawab
- Adakah ini dialog modal atau popover bukan modal yang membenarkan interaksi latar belakang?
- Elemen manakah yang memiliki dialog tersebut, dan di manakah portal dilekapkan (mounted)?
- Apakah yang sepatutnya berlaku kepada fokus semasa buka, batal, hantar, dan tutup?
- Adakah garis dasar pelayar tersedia, atau adakah sandaran (fallback) diperlukan untuk klien yang lebih lama?
Rangka kerja jawapan 30 saat
Saya akan menggunakan dialog modal natif jika boleh, mengalihkan fokus ke tajuk berlabel atau kawalan bermakna pertama, dan menandakan hanya shell aplikasi luar sebagai inert semasa dialog dibuka. Saya akan memulihkan fokus kepada pembuka jika ia masih wujud, menyediakan Escape dan butang tutup yang jelas, serta menguji laluan papan kekunci dan pembaca skrin. inert menghalang interaksi dengan latar belakang; ia tidak menggantikan penamaan dialog, pemulihan fokus, atau pengurusan keadaan.
Penelitian mendalam langkah demi langkah
1. Pilih permukaan semantik yang betul
Gunakan elemen dialog natif dengan showModal() untuk modal sebenar apabila garis dasar pelayar membenarkannya, dan sediakan nama yang mudah diakses melalui tajuk yang kelihatan atau aria-labelledby. Pendedahan (disclosure) bukan modal tidak sepatutnya menjadikan keseluruhan halaman inert kerana pengguna dijangka beralih antara permukaan.
2. Asingkan latar belakang
Gunakan inert pada bekas aplikasi yang berada di luar dialog, bukan pada leluhur sepunya yang turut mengandungi portal dialog. Pelayar mengeluarkan subpokok inert daripada navigasi fokus dan menghalang peristiwa fokus; ia juga menghalang interaksi pengguna yang normal. Jangan taburkan aria-hidden pada leluhur yang mengandungi dialog yang difokuskan.
3. Urus kitaran hayat fokus
Tangkap pembuka sebelum membuka. Semasa dibuka, fokuskan tajuk yang stabil atau kawalan tugas pertama dan bukannya ikon tutup sembarangan. Semasa pembatalan atau penghantaran yang berjaya, tutup dialog, alih keluar inert, dan pulihkan fokus jika pembuka kekal kelihatan dan didayakan. Jika pembuka telah dipadamkan, pilih sasaran logik yang berdekatan dan umumkan hasilnya.
4. Kendalikan portal dan peralihan
Paparkan dialog dalam lapisan peringkat teratas supaya pemangkasan (clipping) dan konteks susunan tidak memerangkapnya. Tetapkan inert sebelum mendedahkan keadaan modal kepada interaksi, dan tangguhkan fokus sehingga dialog dilekapkan. Selaraskan animasi masuk dan keluar dengan keutamaan pergerakan dikurangkan (reduced-motion); jangan sekali-kali membiarkan latar belakang kekal inert selepas peralihan yang terganggu.
5. Uji laluan kegagalan
Uji Tab dan Shift+Tab, Escape, pengaktifan butang tutup, ralat pengesahan, dialog bersarang, perubahan laluan, dan pengumuman pembaca skrin. Sahkan bahawa klik, fokus terprogram, tingkah laku carian dalam halaman, dan peristiwa penuding sepadan dengan tingkah laku inert pelayar. Tambahkan sandaran hanya apabila set pelayar yang disokong memerlukannya, dan alih keluarnya apabila tingkah laku natif boleh dipercayai.
Contoh jawapan berkualiti tinggi
“Untuk modal sebenar, saya akan menggunakan dialog natif, memfokuskan tajuk berlabel atau kawalan tugas pertamanya, dan menetapkan inert pada shell aplikasi luar dan bukannya pada leluhur portal yang mengandungi dialog. Saya akan menangkap pembuka, memulihkan fokus selepas ditutup, menyokong Escape dan butang tutup yang jelas, serta memastikan semantik penamaan dan pengesahan berasingan daripada keadaan inert. Saya akan menguji laluan papan kekunci, pembaca skrin, portal, animasi, dan perubahan laluan, termasuk mengosongkan keadaan inert selepas peralihan yang terganggu.”
Kesilapan lazim
- Menetapkan inert pada punca aplikasi yang mengandungi portal → dialog turut menjadi inert → lekapkan dialog di luar subpokok inert.
- Menggunakan inert sebagai sistem pengurusan fokus → fokus masih boleh mendarat di tempat yang salah semasa buka atau tutup → tentukan kitaran hayat fokus yang lengkap.
- Menyembunyikan latar belakang dengan aria-hidden semasa ia mengandungi fokus → teknologi bantuan melihat keadaan yang tidak konsisten → alihkan fokus terlebih dahulu dan gunakan inert pada latar belakang.
- Melupakan peralihan yang terganggu → halaman kekal terkunci → kosongkan keadaan inert dalam setiap laluan tutup dan nyahlekap (unmount).
Soalan susulan dan respons
Adakah inert menggantikan perangkap fokus (focus trap)?
Ia menghalang latar belakang daripada boleh difokuskan, jadi modal selalunya boleh mengelakkan perangkap yang ditulis secara manual. Anda masih perlu meletakkan fokus awal, memulihkannya, menamakan dialog, dan mengendalikan sandaran pelayar atau komponen.
Bolehkah laci bukan modal menggunakan inert?
Hanya apabila produk secara sengaja menjadikan latar belakang tidak tersedia. Bagi laci bukan modal yang membenarkan interaksi latar belakang, jangan tandakan halaman sebagai inert; gunakan semantik pendedahan yang sesuai sebagai ganti.
Bagaimana jika pembuka hilang?
Pulihkan fokus kepada kawalan logik terdekat, seperti baris yang dikemas kini atau tajuk halaman, dan umumkan hasilnya apabila perlu. Jangan sekali-kali cuba memfokuskan elemen yang terpisah atau dilumpuhkan.