Mengembalikan Fokus Saat Lapisan Ditutup

Saat modal, menu, atau laci dibuka, focus berpindah ke dalamnya. Saat lapisan tersebut ditutup, Anda bertanggung jawab untuk mengembalikan focus ke tempat pengguna sebelumnya berada.

Jika lapisan yang ditutup meninggalkan focus pada elemen yang sudah dihapus, focus akan beralih ke badan halaman. Pengguna menjadi terlantar tanpa tahu sedang berada di mana.

Perbaikannya dimulai sebelum lapisan dibuka: simpan referensi ke elemen yang memicu lapisan tersebut, biasanya document.activeElement.

Saat lapisan ditutup, panggil focus() pada pemicu yang telah disimpan agar pengguna kembali tepat ke tempat semula.

Buka: simpan pemicu dan pindahkan focus ke lapisan. Tutup: sembunyikan lapisan dan pulihkan pemicu. Siklus ini adalah kontrak focus untuk setiap lapisan yang dapat ditutup. 🔁

Elemen dialog milik peramban memulihkan focus ke pembuka secara otomatis saat Anda memanggil close(), sehingga Anda tidak perlu mencatatnya secara manual.

Pulihkan focus apa pun cara lapisan ditutup: tombol Tutup, tombol Escape, atau klik pada latar belakang semuanya harus mengembalikan pengguna.

Jika pemicu dihapus saat lapisan masih terbuka, arahkan focus ke elemen terdekat yang masuk akal, jangan pernah membiarkannya tanpa tujuan.

Pengguna tetikus yang dapat melihat mungkin hampir tidak menyadarinya, tetapi bagi pengguna papan ketik dan pembaca layar, focus yang tidak dipulihkan dapat membuat fitur tidak dapat digunakan.

Buka lapisan dengan Enter, tutup dengan Escape, lalu pastikan cincin focus muncul kembali pada tombol yang membukanya.

Anggap pemulihan focus sebagai bagian dari pembuatan overlay apa pun, bukan sesuatu yang dipikirkan belakangan. Hubungkan fungsinya segera setelah Anda menambahkan logika buka dan tutup.

Modal khusus ditutup. Ke mana focus seharusnya diarahkan?

Sekarang Anda dapat menyelesaikan siklusnya: simpan pemicu saat membuka, pulihkan focus ke pemicu tersebut pada setiap jalur penutupan, dan manfaatkan dialog bawaan jika memungkinkan. 🎯