dnd-kit-Architektur und barrierefreies Design

react-beautiful-dnd war die bevorzugte Drag-and-drop-Bibliothek für React, wurde jedoch 2023 offiziell archiviert und wird nicht mehr gepflegt. Die Community schwenkte schnell auf dnd-kit als empfohlenen Ersatz um. dnd-kit wurde von Grund auf für modernes React und mit Blick auf Barrierefreiheit entwickelt.

dnd-kit basiert auf drei zentralen Architekturkonzepten: DndContext verwaltet den gesamten Drag-Status und koordiniert ziehbare und ablegbare Elemente, sensors abstrahieren Eingabemethoden, sodass dieselbe Drag-Logik mit Maus, Touch und Tastatur funktioniert, und modifiers ermöglichen das Einrasten, Einschränken oder Transformieren der Drag-Bewegung.

dnd-kit wird mit drei integrierten Sensoren ausgeliefert. PointerSensor verarbeitet Maus- und Touch-Eingaben über die einheitliche Pointer Events API. KeyboardSensor ermöglicht vollständiges Drag-and-drop ausschließlich über die Tastatur. TouchSensor verarbeitet ältere Touch-Ereignisse. Sie konfigurieren Sensoren über die sensors-Prop von DndContext.

dnd-kit bietet eine integrierte Tastaturnavigation für die Barrierefreiheit. Benutzer drücken Space, um ein Element aufzunehmen, die Arrow keys, um es an eine neue Position zu verschieben, erneut Space, um es abzulegen, und Escape, um den Drag-Vorgang ohne Änderungen abzubrechen. Diese Interaktionen werden Screenreadern automatisch mitgeteilt.

dnd-kit wendet automatisch aria-grabbed auf ziehbare Elemente an, um deren Aufnahmestatus für assistive Technologien anzuzeigen. Für ablegbare Bereiche verwendet es aria-dropeffect, um mitzuteilen, was beim Ablegen eines Elements geschieht. Eine Live-Region kündigt Statusaktualisierungen an, sodass Screenreader-Benutzer Bestätigungen wie "Element aufgenommen" oder "Element erfolgreich abgelegt" hören.

dnd-kit ist für Tree-Shaking ausgelegt. Das bedeutet, dass Sie nur die tatsächlich verwendeten Bestandteile importieren. Es gibt kein gebündeltes CSS – für die gesamte visuelle Gestaltung sind Sie selbst verantwortlich und haben dadurch vollständige Kontrolle über das Erscheinungsbild ziehbarer Elemente, Overlays und Ablagebereiche. So bleiben die Bundle-Größen minimal.

DndContext stellt drei zentrale Ereignis-Callbacks bereit, um den Ablauf eines Drag-Vorgangs zu verfolgen. onDragStart wird ausgelöst, wenn der Benutzer mit dem Ziehen beginnt, und erhält die ID des aktiven Elements. onDragOver wird kontinuierlich ausgelöst, während das gezogene Element über ablegbare Ziele bewegt wird. onDragEnd wird ausgelöst, wenn der Drag-Vorgang abgeschlossen ist, und stellt das aktive Element sowie das Ablageziel bereit.

Sie übergeben ein Array von Sensorkonfigurationen an DndContext, indem Sie die sensors-Prop mit dem useSensors-Hook kombinieren. Jeder Sensor wird mit useSensor(SensorClass, options) initialisiert. Beispielsweise können Sie PointerSensor mit einer Mindeststrecke für das Ziehen konfigurieren, um versehentliches Ziehen beim Klicken zu verhindern.

Modifier transformieren die Drag-Koordinaten, bevor sie auf das gezogene Element angewendet werden. restrictToVerticalAxis beschränkt die Bewegung auf eine Richtung. restrictToParentElement hält das gezogene Element innerhalb seines Containers. snapCenterToCursor rastet das Element so ein, dass sein Mittelpunkt dem Cursor folgt. Sie kombinieren mehrere Modifier in einem Array.

Jedes ziehbare und ablegbare Element benötigt eine eindeutige String- oder numerische ID. Diese IDs sind die wichtigste Grundlage dafür, wie dnd-kit verfolgt, was gezogen wird und wo es abgelegt wird. In onDragEnd lesen Sie event.active.id für das gezogene Element und event.over?.id für das Ablageziel, um den Status Ihrer Anwendung zu aktualisieren.

Anders als viele DnD-Bibliotheken, die Tastaturunterstützung nachträglich ergänzen, stellt dnd-kit die Barrierefreiheit in den Mittelpunkt seines Designs. Der KeyboardSensor ist gleichberechtigt und bietet dieselben Funktionen wie der PointerSensor. Alle ARIA-Attribute werden automatisch verwaltet, und benutzerdefinierte Ansagen können über die accessibility-Prop von DndContext konfiguriert werden.

Welche Taste verwendet dnd-kit, um einen laufenden Drag-Vorgang über die Tastatur ohne Änderungen abzubrechen?

dnd-kit hat das archivierte react-beautiful-dnd als Community-Standard für Drag-and-drop mit React abgelöst. Die Architektur basiert auf DndContext für den Status, Sensoren für die Abstraktion der Eingabe (Pointer, Keyboard, Touch) und Modifiers für Bewegungseinschränkungen. Barrierefreiheit ist ein zentraler Bestandteil: ARIA-Attribute, Ansagen über Live-Regionen und vollständige Tastaturnavigation sind integriert.