Architettura di dnd-kit e design incentrato sull'accessibilità

react-beautiful-dnd era la libreria di riferimento per il drag and drop in React, ma è stata archiviata ufficialmente nel 2023 e non è più sottoposta a manutenzione. La comunità si è rapidamente orientata verso dnd-kit come sostituto consigliato, progettato da zero per React moderno e tenendo conto dell'accessibilità.

dnd-kit si basa su tre concetti architetturali fondamentali: DndContext gestisce tutto lo stato del trascinamento e coordina gli elementi trascinabili e quelli che accettano il rilascio, i sensors astraggono i metodi di input così che la stessa logica di trascinamento funzioni con mouse, tocco e tastiera, mentre i modifiers consentono di agganciare, limitare o trasformare il movimento durante il trascinamento.

dnd-kit include tre sensori integrati. PointerSensor gestisce sia l'input del mouse sia quello tattile tramite l'API unificata Pointer Events. KeyboardSensor abilita il drag and drop interamente da tastiera. TouchSensor gestisce gli eventi touch legacy. I sensori si configurano tramite la prop sensors di DndContext.

dnd-kit include la navigazione da tastiera per l'accessibilità. Gli utenti premono Space per sollevare un elemento, Arrow keys per spostarlo in una nuova posizione, Space again per rilasciarlo e Escape per annullare il trascinamento senza apportare modifiche. Queste interazioni vengono annunciate automaticamente agli screen reader.

dnd-kit applica automaticamente aria-grabbed agli elementi trascinabili per indicare il relativo stato di presa alle tecnologie assistive. Utilizza aria-dropeffect sulle aree che accettano il rilascio per comunicare cosa accadrà quando un elemento verrà rilasciato. Un'area live annuncia gli aggiornamenti di stato, così gli utenti degli screen reader ricevono conferme come "Elemento sollevato" o "Elemento rilasciato correttamente".

dnd-kit è progettato per supportare il tree shaking, ovvero consente di importare solo i componenti effettivamente utilizzati. Non include CSS predefiniti: tutto lo stile visivo è responsabilità dell'utente, che ha il pieno controllo sull'aspetto degli elementi trascinabili, degli overlay e delle aree di rilascio. In questo modo le dimensioni del bundle restano minime.

DndContext fornisce tre callback principali per monitorare il ciclo di vita del trascinamento. onDragStart viene eseguito quando l'utente inizia a trascinare e riceve l'ID dell'elemento attivo. onDragOver viene eseguito continuamente mentre l'elemento trascinato passa sopra i target che accettano il rilascio. onDragEnd viene eseguito al termine del trascinamento e fornisce l'elemento attivo e il target di rilascio.

Si passa un array di configurazioni dei sensori a DndContext utilizzando la prop sensors insieme all'hook useSensors. Ogni sensore viene inizializzato con useSensor(SensorClass, options). Ad esempio, è possibile configurare PointerSensor con una distanza minima di trascinamento per evitare trascinamenti accidentali quando si fa clic.

I modifier trasformano le coordinate del trascinamento prima che vengano applicate all'elemento trascinato. restrictToVerticalAxis blocca il movimento su un'unica direzione. restrictToParentElement mantiene l'elemento trascinato all'interno del relativo contenitore. snapCenterToCursor aggancia l'elemento in modo che il suo centro segua il cursore. È possibile comporre più modifier in un array.

Ogni elemento draggable e droppable deve avere un ID univoco, sotto forma di stringa o numero. Questi ID sono il metodo principale con cui dnd-kit tiene traccia dell'elemento trascinato e della destinazione del rilascio. In onDragEnd, si legge event.active.id per l'elemento trascinato e event.over?.id per il target di rilascio, così da aggiornare lo stato dell'applicazione.

A differenza di molte librerie DnD che considerano il supporto da tastiera un'aggiunta secondaria, dnd-kit pone l'accessibilità al centro del proprio design. KeyboardSensor è un componente di primo livello, con le stesse capacità di PointerSensor. Tutti gli attributi ARIA vengono gestiti automaticamente e gli annunci personalizzati possono essere configurati tramite la prop accessibility di DndContext.

Quale tasto utilizza dnd-kit per annullare un trascinamento da tastiera in corso senza apportare modifiche?

dnd-kit ha sostituito react-beautiful-dnd, ormai archiviato, come standard della comunità per il drag and drop in React. La sua architettura ruota attorno a DndContext per lo stato, ai sensors per l'astrazione dell'input (Pointer, Keyboard, Touch) e ai modifiers per vincolare il movimento. L'accessibilità è un requisito fondamentale: attributi ARIA, annunci tramite live region e navigazione completa da tastiera sono integrati.