dnd-kit Mimarisi ve Erişilebilirlik Öncelikli Tasarım

react-beautiful-dnd, React için başvurulan sürükle ve bırak kütüphanesiydi; ancak 2023'te resmen arşivlendi ve artık bakımı yapılmıyor. Topluluk, modern React ve erişilebilirlik düşünülerek sıfırdan tasarlanan önerilen çözüm olarak hızla dnd-kit etrafında birleşti.

dnd-kit üç temel mimari kavram üzerine kuruludur: DndContext tüm sürükleme durumunu yönetir ve sürüklenebilir ile bırakılabilir öğeler arasındaki koordinasyonu sağlar, sensörler giriş yöntemlerini soyutlayarak aynı sürükleme mantığının fare, dokunmatik ekran ve klavyeyle çalışmasını sağlar, değiştiriciler ise sürükleme hareketini yakalamanıza, kısıtlamanıza veya dönüştürmenize olanak tanır.

dnd-kit, yerleşik üç sensörle birlikte gelir. PointerSensor, birleşik Pointer Events API aracılığıyla hem fare hem de dokunmatik ekran girişini işler. KeyboardSensor, yalnızca klavye kullanılarak tam sürükle ve bırak desteği sağlar. TouchSensor, eski dokunmatik olaylarını işler. Sensörleri DndContext üzerindeki sensors prop'u aracılığıyla yapılandırırsınız.

dnd-kit, erişilebilirlik için yerleşik klavye gezinmesine sahiptir. Kullanıcılar bir öğeyi almak için Boşluk tuşuna, yeni bir konuma taşımak için Ok tuşlarına, bırakmak için yeniden Boşluk tuşuna basar; değişiklik yapmadan sürüklemeyi iptal etmek için Escape tuşuna basarlar. Bu etkileşimler ekran okuyuculara otomatik olarak duyurulur.

dnd-kit, yardımcı teknolojilere tutma durumunu belirtmek için sürüklenebilir öğelere aria-grabbed uygular. Bir öğe bırakıldığında ne olacağını iletmek için bırakılabilir bölgelere aria-dropeffect ekler. Canlı bir bölge durum güncellemelerini duyurur; böylece ekran okuyucu kullananlar "Öğe alındı" veya "Öğe başarıyla bırakıldı" gibi onayları duyar.

dnd-kit, ağaç sarsımını destekleyecek şekilde tasarlanmıştır; yani yalnızca gerçekten kullandığınız parçaları içe aktarırsınız. Paketle birlikte gelen CSS yoktur; tüm görsel stillendirme sizin sorumluluğunuzdadır. Bu sayede sürüklenebilir öğelerin, katmanların ve bırakma bölgelerinin görünümü üzerinde tam denetim sahibi olursunuz. Böylece paket boyutları en aza iner.

DndContext, sürükleme yaşam döngüsünü izlemek için üç temel olay geri çağırması sağlar. onDragStart, kullanıcı sürüklemeye başladığında çalışır ve etkin öğenin kimliğini alır. onDragOver, sürüklenen öğe bırakılabilir hedeflerin üzerinde hareket ederken sürekli olarak çalışır. onDragEnd, sürükleme tamamlandığında çalışır ve etkin öğeyi ve bırakma hedefini size sağlar.

sensors prop'unu useSensors kancasıyla birlikte kullanarak DndContext'e bir sensör yapılandırmaları dizisi geçirirsiniz. Her sensör useSensor(SensorClass, options) ile başlatılır. Örneğin, tıklarken yanlışlıkla sürüklemeyi önlemek için PointerSensor'ı minimum bir sürükleme mesafesiyle yapılandırabilirsiniz.

Değiştiriciler, sürükleme koordinatlarını sürüklenen öğeye uygulanmadan önce dönüştürür. restrictToVerticalAxis hareketi tek bir yöne kilitler. restrictToParentElement sürüklenen öğeyi kapsayıcısının içinde tutar. snapCenterToCursor öğeyi, merkezinin imleci izleyeceği şekilde hizalar. Birden çok değiştiriciyi bir dizide birleştirirsiniz.

Her sürüklenebilir ve bırakılabilir öğenin benzersiz bir dize veya sayı kimliği olması gerekir. Bu kimlikler, dnd-kit'in neyin sürüklendiğini ve nereye bırakıldığını izlemesinin başlıca yoludur. onDragEnd içinde sürüklenen öğe için event.active.id, bırakma hedefi içinse event.over?.id değerini okuyarak uygulama durumunuzu güncellersiniz.

Klavye desteğini sonradan eklenen bir özellik olarak gören birçok DnD kütüphanesinin aksine dnd-kit, erişilebilirliği tasarımının merkezine koyar. KeyboardSensor, PointerSensor ile aynı yeteneklere sahip birinci sınıf bir bileşendir. Tüm ARIA öznitelikleri otomatik olarak yönetilir ve özel duyurular DndContext üzerindeki accessibility prop'u aracılığıyla yapılandırılabilir.

Devam eden bir klavye sürüklemesini değişiklik yapmadan iptal etmek için dnd-kit hangi tuşu kullanır?

dnd-kit, arşivlenen react-beautiful-dnd'nin yerini alarak React sürükle ve bırak işlemleri için topluluk standardı hâline geldi. Mimarisi durum için DndContext, girdi soyutlaması için sensörler (Pointer, Keyboard, Touch) ve hareket kısıtlamaları için değiştiriciler etrafında şekillenir. Erişilebilirlik birinci sınıftır: ARIA öznitelikleri, canlı bölge duyuruları ve tam klavye gezinmesi yerleşik olarak sunulur.