Arsitektur dnd-kit dan Desain yang Mengutamakan Aksesibilitas

react-beautiful-dnd dahulu merupakan pustaka seret dan lepas andalan untuk React, tetapi secara resmi diarsipkan pada 2023 dan tidak lagi dipelihara. Komunitas segera mengandalkan dnd-kit sebagai pengganti yang direkomendasikan, yang dirancang dari awal dengan mempertimbangkan React modern dan aksesibilitas.

dnd-kit dibangun berdasarkan tiga konsep arsitektur utama: DndContext mengelola semua status seret dan mengoordinasikan elemen yang dapat diseret serta target pelepasan, sensor mengabstraksikan metode masukan agar logika seret yang sama dapat digunakan untuk tetikus, sentuhan, dan papan ketik, sedangkan pengubah memungkinkan Anda menempelkan, membatasi, atau mengubah gerakan seret.

dnd-kit menyediakan tiga sensor bawaan. PointerSensor menangani masukan tetikus dan sentuhan melalui Pointer Events API terpadu. KeyboardSensor memungkinkan seret dan lepas sepenuhnya hanya dengan papan ketik. TouchSensor menangani peristiwa sentuhan lama. Anda mengonfigurasi sensor melalui prop sensors pada DndContext.

dnd-kit memiliki navigasi papan ketik bawaan untuk aksesibilitas. Pengguna menekan Spasi untuk mengambil suatu item, Tombol panah untuk memindahkannya ke posisi baru, Spasi lagi untuk melepaskannya, dan Esc untuk membatalkan seretan tanpa melakukan perubahan. Interaksi ini diumumkan secara otomatis kepada pengguna pembaca layar.

dnd-kit secara otomatis menerapkan aria-grabbed pada item yang dapat diseret untuk menunjukkan status pengambilannya kepada teknologi bantu. Pustaka ini menggunakan aria-dropeffect pada zona target pelepasan untuk menyampaikan apa yang akan terjadi saat item dilepaskan. Wilayah langsung mengumumkan pembaruan status agar pengguna pembaca layar mendengar konfirmasi seperti "Item diambil" atau "Item berhasil dilepas."

dnd-kit dirancang agar mendukung tree-shaking, artinya Anda hanya mengimpor bagian yang benar-benar digunakan. Tidak ada CSS bawaan — semua penataan visual menjadi tanggung jawab Anda, sehingga Anda memiliki kendali penuh atas tampilan elemen yang dapat diseret, lapisan, dan zona pelepasan. Hal ini menjaga ukuran bundel tetap minimal.

DndContext menyediakan tiga callback peristiwa utama untuk melacak siklus hidup seretan. onDragStart dipanggil saat pengguna mulai menyeret dan menerima ID item aktif. onDragOver dipanggil terus-menerus saat item yang diseret bergerak di atas target pelepasan. onDragEnd dipanggil saat seretan selesai dan memberikan item aktif serta target pelepasan.

Anda meneruskan array konfigurasi sensor ke DndContext menggunakan prop sensors yang digabungkan dengan hook useSensors. Setiap sensor diinisialisasi dengan useSensor(SensorClass, options). Misalnya, Anda dapat mengonfigurasi PointerSensor dengan jarak seret minimum untuk mencegah seretan yang tidak disengaja saat mengeklik.

Pengubah mengubah koordinat seret sebelum diterapkan pada elemen yang diseret. restrictToVerticalAxis mengunci gerakan ke satu arah. restrictToParentElement menjaga item yang diseret tetap berada di dalam wadahnya. snapCenterToCursor menempelkan elemen sehingga pusatnya mengikuti kursor. Anda dapat menggabungkan beberapa pengubah dalam sebuah array.

Setiap elemen yang dapat diseret dan target pelepasan memerlukan ID unik berupa teks atau angka. ID ini merupakan cara utama dnd-kit melacak apa yang sedang diseret dan di mana item tersebut dilepaskan. Dalam onDragEnd, Anda membaca event.active.id untuk item yang diseret dan event.over?.id untuk target pelepasan guna memperbarui status aplikasi.

Tidak seperti banyak pustaka seret dan lepas yang menganggap dukungan papan ketik sebagai tambahan belakangan, dnd-kit menempatkan aksesibilitas sebagai inti desainnya. KeyboardSensor merupakan fitur utama dengan kemampuan yang sama seperti PointerSensor. Semua atribut ARIA dikelola secara otomatis, dan pengumuman khusus dapat dikonfigurasi melalui prop accessibility pada DndContext.

dnd-kit menggantikan react-beautiful-dnd yang telah diarsipkan sebagai standar komunitas untuk seret dan lepas di React. Arsitekturnya berpusat pada DndContext untuk status, sensor untuk abstraksi masukan (penunjuk, papan ketik, dan sentuhan), serta pengubah untuk membatasi gerakan. Aksesibilitas menjadi prioritas utama: atribut ARIA, pengumuman wilayah langsung, dan navigasi papan ketik lengkap telah tersedia.