Architektura dnd-kit i projektowanie z naciskiem na dostępność

react-beautiful-dnd było podstawową biblioteką do obsługi przeciągania i upuszczania w React, ale w 2023 roku zostało oficjalnie zarchiwizowane i nie jest już utrzymywane. Społeczność szybko przyjęła dnd-kit jako zalecany zamiennik. Biblioteka ta została zaprojektowana od podstaw z myślą o nowoczesnym React i dostępności.

dnd-kit opiera się na trzech kluczowych koncepcjach architektonicznych: DndContext zarządza całym stanem przeciągania i koordynuje elementy, które można przeciągać, z elementami, na które można je upuszczać; sensors abstrahują metody wprowadzania danych, dzięki czemu ta sama logika przeciągania działa dla myszy, dotyku i klawiatury; a modifiers umożliwiają przyciąganie, ograniczanie lub przekształcanie ruchu podczas przeciągania.

dnd-kit zawiera trzy wbudowane sensory. PointerSensor obsługuje zarówno mysz, jak i dotyk za pośrednictwem ujednoliconego interfejsu Pointer Events API. KeyboardSensor umożliwia pełne przeciąganie i upuszczanie wyłącznie za pomocą klawiatury. TouchSensor obsługuje starsze zdarzenia dotykowe. Sensory konfiguruje się za pomocą właściwości sensors komponentu DndContext.

dnd-kit ma wbudowaną nawigację klawiaturą zapewniającą dostępność. Aby podnieść element, należy nacisnąć Space, aby przenieść go w nowe miejsce — Arrow keys, aby go upuścić — ponownie Space, a aby anulować przeciąganie bez wprowadzania zmian — Escape. Interakcje te są automatycznie przekazywane czytnikom ekranu.

dnd-kit automatycznie przypisuje elementom, które można przeciągać, atrybut aria-grabbed, aby wskazać technologiom wspomagającym ich stan przechwycenia. Atrybutu aria-dropeffect używa w strefach, na które można upuszczać elementy, aby przekazać informację o tym, co się stanie po upuszczeniu elementu. Obszar live region ogłasza aktualizacje stanu, dzięki czemu użytkownicy czytników ekranu słyszą potwierdzenia takie jak "Item picked up" lub "Item dropped successfully."

dnd-kit został zaprojektowany z myślą o tree-shakingu, co oznacza, że importują Państwo tylko te elementy, których rzeczywiście używają. Biblioteka nie zawiera dołączonego CSS — za całe stylowanie wizualne odpowiadają Państwo, zyskując pełną kontrolę nad wyglądem elementów, nakładek i stref upuszczania. Pozwala to utrzymać minimalny rozmiar bundla.

DndContext udostępnia trzy główne wywołania zwrotne zdarzeń służące do śledzenia cyklu życia przeciągania. onDragStart jest wywoływane po rozpoczęciu przeciągania przez użytkownika i otrzymuje identyfikator aktywnego elementu. onDragOver jest wywoływane nieprzerwanie podczas przemieszczania przeciąganego elementu nad miejscami, na które można go upuścić. onDragEnd jest wywoływane po zakończeniu przeciągania i przekazuje aktywny element oraz miejsce upuszczenia.

Do komponentu DndContext przekazują Państwo tablicę konfiguracji sensorów za pomocą właściwości sensors połączonej z hookiem useSensors. Każdy sensor jest inicjalizowany za pomocą useSensor(SensorClass, options). Na przykład można skonfigurować PointerSensor z minimalnym dystansem przeciągania, aby zapobiec przypadkowemu przeciąganiu podczas klikania.

Modyfikatory przekształcają współrzędne przeciągania przed zastosowaniem ich do przeciąganego elementu. restrictToVerticalAxis ogranicza ruch do jednego kierunku. restrictToParentElement utrzymuje przeciągany element wewnątrz jego kontenera. snapCenterToCursor przyciąga element tak, aby jego środek podążał za kursorem. Wiele modyfikatorów można łączyć w jednej tablicy.

Każdy element, który można przeciągać lub na który można upuszczać elementy, musi mieć unikatowy identyfikator będący ciągiem znaków lub liczbą. Identyfikatory te są podstawowym sposobem, w jaki dnd-kit śledzi przeciągany element i miejsce jego upuszczenia. W onDragEnd należy odczytać event.active.id dla przeciąganego elementu oraz event.over?.id dla miejsca upuszczenia, aby zaktualizować stan aplikacji.

W przeciwieństwie do wielu bibliotek DnD, które traktują obsługę klawiatury jako funkcję drugorzędną, dnd-kit stawia dostępność w centrum swojego projektu. KeyboardSensor jest pełnoprawnym elementem biblioteki i oferuje te same możliwości co PointerSensor. Wszystkie atrybuty ARIA są zarządzane automatycznie, a niestandardowe komunikaty można skonfigurować za pomocą właściwości accessibility komponentu DndContext.

Jakiego klawisza używa dnd-kit do anulowania trwającego przeciągania za pomocą klawiatury bez wprowadzania zmian?

dnd-kit zastąpił zarchiwizowaną bibliotekę react-beautiful-dnd i stał się standardem społeczności React w zakresie przeciągania i upuszczania. Jego architektura koncentruje się na DndContext zarządzającym stanem, sensorach zapewniających abstrakcję metod wprowadzania danych (Pointer, Keyboard, Touch) oraz modyfikatorach ograniczających ruch. Dostępność jest traktowana priorytetowo: wbudowano atrybuty ARIA, komunikaty w obszarze live region i pełną nawigację klawiaturą.