Konteks dan arahan
Anda memerlukan pratinjau profil yang muncul saat pointer di-hover, keyboard difokuskan, atau ditekan lama, lalu tersembunyi saat minat berakhir. Jelaskan bagaimana Anda akan menggunakan interestfor dan menangani kompatibilitas, fokus, penundaan, serta konten yang tidak boleh dipicu oleh hover.
Interest invoker pada Popover API memungkinkan tombol atau tautan mengarah ke ID target di hierarki pohon yang sama dengan interestfor. Target dapat berupa kartu pratinjau popover="hint". Browser akan menampilkannya saat invoker menjadi menarik (interesting) melalui hover, fokus, atau tekan lama dan menyembunyikannya saat minat berakhir. Hal ini cocok untuk bantuan singkat yang tidak kritis; ini tidak boleh menjadi satu-satunya cara untuk menemukan informasi atau tindakan.
Apa yang diuji oleh pewawancara
Pewawancara ingin melihat apakah Anda membedakan antara minat (interest) dan aktivasi (activation), memahami ID target, status popover, dan InterestEvent, serta dapat menangani keyboard, sentuhan, penundaan, kompatibilitas, aksesibilitas, dan kasus di mana klik eksplisit atau tautan normal lebih aman.
Pertanyaan klarifikasi
Konfirmasikan apakah antarmuka tersebut berupa petunjuk (hint), pratinjau, atau menu dengan kontrol; matriks dukungan browser; persyaratan layar sentuh; apakah kontennya kritis; dan apakah target berada dalam hierarki DOM yang sama. Klarifikasi juga apakah pengguna boleh masuk dan bertahan di dalam antarmuka tersebut, penundaan untuk tampil dan sembunyi, aturan pengembalian fokus, serta pengalaman minimum tanpa JavaScript.
Jawaban 30 detik
“Saya akan menggunakan tombol atau tautan native dengan interestfor yang mengarah ke Popover hint, sembari mempertahankan nama profil dan tautan normal sebagai jalur utama. Interest invoker menyediakan visibilitas untuk hover, fokus, dan tekan lama; saya akan menggunakan interest-delay, atau strategi setara, untuk mengurangi flicker. Saya akan melakukan feature-detection dan menyiapkan fallback ke listener fokus dan klik. Teks pratinjau harus tetap tersedia bagi pengguna keyboard dan sentuh, dan apa pun yang memiliki efek samping atau model interaksi lengkap harus menggunakan aktivasi eksplisit.”
Jawaban mendalam
Langkah 1: Membuat relasi minat
Nilai interestfor mengarah ke ID elemen target, dan target serta invoker harus berada dalam hierarki pohon yang sama. Contoh minimalnya adalah:
<button interestfor="profile-preview" aria-label="Read Ada's profile">
Ada Lovelace
</button>
<article id="profile-preview" popover="hint">
Early computing pioneer; the profile page contains the full biography.
</article>Tombol tetap menjadi kontrol native yang dapat difokuskan; pratinjau bersifat suplemen dan bukan satu-satunya rute menuju profil.
Langkah 2: Memisahkan minat dari aktivasi
Minat (interest) adalah umpan balik sementara untuk pratinjau, penjelasan, dan konteks tambahan. Klik atau tombol Enter adalah aktivasi untuk navigasi, pengiriman (submission), atau tindakan yang tidak dapat dibatalkan. Jangan sembunyikan kontrol hapus, beli, atau konfirmasi di dalam antarmuka yang hanya muncul melalui minat.
Langkah 3: Menghormati batasan Popover
Browser mengontrol status tampilan target popover="hint". Hindari skrip lain memaksa status yang sama, karena dua pemilik kontrol dapat mengalami race condition. Jika antarmuka memerlukan model keyboard menu, penjebakan fokus (focus trapping), atau status yang kompleks, pertimbangkan pola menu, dialog, atau komponen eksplisit.
Langkah 4: Mengontrol penundaan dan flicker
Pointer dapat melintasi batas antara invoker dan pratinjau dengan cepat. Gunakan interest-delay untuk timing tampil dan sembunyi, serta rancang area sentuh (hit area) yang berkesinambungan antara pemicu dan target. Kalibrasikan penundaan dengan pengujian pointer, keyboard, dan sentuhan daripada mengasumsikan satu nilai cocok untuk semua perangkat.
Langkah 5: Mencakup jalur keyboard dan pembaca layar
Tombol atau tautan native dapat menerima fokus. Pratinjau harus memiliki relasi nama yang jelas tanpa merebut fokus secara tak terduga. Jaga agar teks pratinjau tetap tersedia melalui nama yang terlihat, tujuan, atau konten statis lainnya; jangan mengganti indikasi fokus dengan hover atau menempatkan pesan kesalahan penting hanya di dalam pratinjau.
Langkah 6: Memperhitungkan sentuhan dan tekan lama
Layar sentuh tidak memiliki hover tradisional. Minat tekan lama dapat memberikan pratinjau, tetapi tidak boleh memblokir ketukan biasa atau scrolling. Pertahankan jalur ketukan langsung untuk tindakan penting, dan uji layar kecil untuk oklusi, overflow viewport, serta perilaku penutupan.
Langkah 7: Feature-detect dan fallback bertahap
Jangan berasumsi setiap runtime mendukung interestfor. Lakukan feature-detection pada HTMLButtonElement.prototype.interestForElement; jika tidak ada, pertahankan konten HTML dan tautan biasa, lalu tambahkan pratinjau dasar dengan listener fokus, pointer, atau klik. Fallback harus menambah kapabilitas tanpa merender sumber kebenaran (source of truth) kedua.
Langkah 8: Menguji siklus hidup dan batasannya
Uji pointer enter dan leave, perpindahan dari invoker ke pratinjau, Tab dan Shift+Tab, tekan lama, scrolling, Escape, masuk kembali secara cepat, dan penghapusan target secara dinamis. Verifikasi accessibility tree, batasan, penundaan, konten tanpa JavaScript, dan matriks browser target; label ketersediaan MDN bukanlah pengganti pengujian langsung pada proyek.
Jawaban model
Saya akan membuat avatar sebagai tautan atau tombol native dan mengarahkan interestfor ke pratinjau popover="hint" di hierarki yang sama. Pratinjau menambahkan konteks, sementara nama dan tautan profil tetap terlihat pada konten statis. Minat mencakup pointer, fokus, dan tekan lama; interest-delay serta area hit yang berkesinambungan akan mengurangi flicker. Sebelum implementasi, saya akan mendeteksi interestForElement; browser yang tidak didukung tetap mempertahankan konten biasa dan menerima perilaku fokus, pointer, atau klik yang sama melalui fallback. Konten untuk hapus, beli, menu, atau efek samping lainnya harus menggunakan aktivasi eksplisit daripada antarmuka berbasis minat saja. Saya akan memverifikasi keyboard, sentuhan, pembaca layar, scrolling, Escape, penghapusan dinamis, dan matriks browser target.
Kesalahan umum
Memperlakukan interestfor sebagai atribut tooltip generik
Ini menetapkan relasi interest-invoker dan bergantung pada perilaku browser terkait Popover. Target yang membutuhkan model menu atau status kompleks memerlukan semantik komponen yang sesuai.
Hanya menerapkan CSS hover
Pengguna keyboard tidak memiliki pointer hover, dan layar sentuh memiliki model gestur yang berbeda. Pertahankan perilaku fokus, jalur ketuk, dan informasi statis.
Menjadikan pratinjau sebagai satu-satunya sumber konten penting
Pengguna mungkin menjalankan browser yang tidak didukung, menonaktifkan skrip, atau tidak dapat melakukan tekan lama. Nama, status, dan tindakan penting harus tetap ada di konten utama atau jalur aktivasi eksplisit.
Pertanyaan lanjutan dan jawaban
Bagaimana jika browser tidak mendukung interestfor?
Pertahankan HTML biasa, tautan, dan gaya fokus lengkap terlebih dahulu, lalu lakukan feature-detection. Fallback menambahkan perilaku pratinjau tanpa mengubah navigasi atau struktur informasi, dan ini diuji dalam matriks dukungan.
Bagaimana cara mencegah flicker antara invoker dan pratinjau?
Gunakan area hit yang berkesinambungan, penundaan tampil dan sembunyi, serta pertahankan minat saat pointer memasuki target. Jangan biarkan beberapa skrip mengendalikan status Popover; catat urutan enter, leave, dan penghapusan saat mendiagnosis race condition.
Haruskah fokus berpindah ke pratinjau saat invoker menerima fokus?
Untuk pratinjau murni, biasanya tidak: pertahankan fokus pada invoker dan tampilkan accessible name yang jelas. Jika antarmuka berisi kontrol, beralihlah ke menu atau dialog yang diaktifkan secara eksplisit dengan perilaku masuk, Escape, dan pengembalian yang terdefinisi.
Bagaimana Anda menangani tekan lama versus ketukan biasa?
Pratinjau tekan lama tidak boleh memblokir navigasi ketuk atau scrolling. Pertahankan target ketuk untuk tindakan penting dan uji tekan lama, ketukan singkat, scroll, serta batas viewport pada perangkat nyata.
Berapa nilai yang harus digunakan interest-delay?
Tidak ada nilai universal untuk semua perangkat. Ukur kasus masuk, keluar, dan gerakan cepat terhadap kepadatan konten dan biaya pemicuan yang tidak disengaja. Berikan umpan balik fokus langsung agar pengguna keyboard tidak perlu menunggu penundaan yang diorientasikan untuk pointer.
Kapan sebaiknya Anda menghindari interest invoker?
Hindari saat konten bersifat kritis, tindakan memiliki efek samping, manajemen fokus rumit, koordinasi melintasi beberapa hierarki pohon DOM, atau browser lama wajib didukung. Interest invoker paling baik untuk pratinjau pelengkap yang berisiko rendah dan bersifat sementara.