Pemicu Minat dan Atribut Command

Kelompok Open UI sedang menstandardisasi dua atribut HTML baru — command untuk tindakan yang dipicu oleh klik, dan interesttarget untuk "ketertarikan" yang dipicu oleh pengarahan kursor atau fokus (dasar untuk keterangan singkat dan pratinjau). Keduanya memperluas HTML dengan perilaku deklaratif yang sebelumnya biasanya memerlukan JavaScript.

Tombol dengan command="show-modal" dan commandfor="dialog-id" menampilkan kotak dialog tanpa JS — menggantikan pemanggilan manual dialog.showModal(). Perintah lainnya: command="close", command="toggle-popover", command="show-popover".

Set awalnya menargetkan pola UI umum: menampilkan atau menyembunyikan kotak dialog (bawaan <dialog>), mengubah tampilan popover (Popover API), dan mungkin bertambah seiring waktu. Elemen khusus dapat menyatakan perintah mana yang diterimanya melalui penanganan peristiwa oncommand.

Selain perintah bawaan, spesifikasi ini mengizinkan rangkaian perintah khusus yang diawali dengan "--". Elemen sasaran menerima peristiwa command yang dapat Anda tangani dalam JS: el.addEventListener("command", (e) => { if (e.command === "--save") save(); }).

Atribut interesttarget menandai target "ketertarikan" suatu elemen — biasanya keterangan singkat yang muncul saat kursor diarahkan ke elemen atau saat elemen mendapat fokus. Browser menangani waktunya (penundaan 300 milidetik untuk memastikan kursor memang diarahkan), posisinya (dengan pemosisian jangkar), dan penutupannya secara otomatis.

Mode popover hint dirancang untuk popover bergaya keterangan singkat yang muncul saat ada ketertarikan. Popover ini tidak bersifat modal, tidak mengambil alih fokus, dan tertutup saat ketertarikan berakhir. Kombinasi interesttarget + popover="hint" memberi Anda keterangan singkat bawaan hanya dengan dua atribut HTML.

Kotak dialog bawaan menangani penguncian fokus; popover bawaan menangani penumpukan; pemicu ketertarikan bawaan menangani waktu tunggu pengarahan kursor dan mengumumkan hubungan kepada pembaca layar. Mengganti implementasi JS khusus dengan komponen dasar deklaratif ini secara konsisten meningkatkan kualitas aksesibilitas.

Fitur-fitur ini masih dalam proses standardisasi. Nama atribut dan kumpulan perintah yang tepat mungkin berubah. Implementasi browser pertama kali muncul di Chromium. Penggunaan dalam produksi sebaiknya menunggu sampai penamaannya stabil dan setidaknya dua browser menyediakannya — kemungkinan dalam satu atau dua tahun ke depan.

Masing-masing fitur ini menggantikan JavaScript yang telah ditulis dan ditulis ulang jutaan kali: pengelolaan kotak dialog, pemicu popover, dan perilaku keterangan singkat. Memindahkan pola-pola ini ke dalam HTML mengurangi ukuran halaman, meningkatkan konsistensi, dan memungkinkan browser menerapkan pengoptimalan.

Kelompok komunitas Open UI (open-ui.org) mendorong sebagian besar pekerjaan ini — mengusulkan, membuat purwarupa, dan mengawal elemen serta atribut HTML baru melalui proses standardisasi. Ikuti blog mereka untuk mengetahui proposal terbaru.

command, interesttarget, popover, dialog, pemosisian jangkar, transisi tampilan, dan elemen pilihan yang dapat disesuaikan semuanya merupakan bagian dari satu upaya terpadu untuk menghadirkan pola pustaka komponen ke dalam platform. Masing-masing memang kecil; secara bersama-sama, fitur-fitur tersebut menjadi perluasan terbesar kosakata UI HTML dalam beberapa tahun terakhir.

Ikuti proposalnya (open-ui.org), bereksperimenlah di Chromium dengan fitur eksperimental yang diaktifkan, dan rencanakan adopsi setelah fitur-fitur tersebut stabil. Tinjau basis kode Anda saat ini: hitung seberapa banyak JS yang didedikasikan untuk kode pendukung kotak dialog, popover, dan keterangan singkat. Kode tersebut ditargetkan untuk digantikan dalam beberapa rilis berikutnya.

Apa tujuan atribut command pada sebuah tombol?

Dua fitur baru yang sedang berkembang memperluas kosakata UI deklaratif HTML: command + commandfor untuk tindakan yang dipicu oleh klik (menampilkan kotak modal, mengubah tampilan popover) dan interesttarget + popover="hint" untuk keterangan singkat yang dipicu oleh pengarahan kursor atau fokus. Keduanya menggantikan pola JavaScript umum dengan atribut HTML, sehingga meningkatkan aksesibilitas dan mengurangi ukuran bundel. Fitur-fitur ini masih berkembang; ikuti Open UI untuk mengetahui kapan penamaannya stabil, lalu gunakan setelah dukungan browser tersedia.