Architecture de dnd-kit et conception axée sur l’accessibilité

react-beautiful-dnd était la bibliothèque de glisser-déposer de référence pour React, mais elle a été officiellement archivée en 2023 et n'est plus maintenue. La communauté s'est rapidement tournée vers dnd-kit comme remplacement recommandé, conçu depuis zéro pour React moderne et l'accessibilité.

dnd-kit repose sur trois concepts architecturaux clés : DndContext gère tout l'état du glissement et coordonne les éléments déplaçables et les zones de dépôt, les capteurs abstraient les modes de saisie afin que la même logique de glissement fonctionne avec la souris, le tactile et le clavier, et les modificateurs permettent d'aligner, de restreindre ou de transformer le mouvement du glissement.

dnd-kit fournit trois capteurs intégrés. PointerSensor gère les saisies à la souris et tactiles via l'API unifiée des événements de pointeur. KeyboardSensor permet le glisser-déposer entièrement au clavier. TouchSensor gère les anciens événements tactiles. Vous configurez les capteurs via la propriété sensors de DndContext.

dnd-kit intègre une navigation au clavier pour l'accessibilité. Les utilisateurs appuient sur Espace pour saisir un élément, sur les touches fléchées pour le déplacer vers une nouvelle position, de nouveau sur Espace pour le déposer et sur Échap pour annuler le glissement sans effectuer de modification. Ces interactions sont annoncées automatiquement aux lecteurs d'écran.

dnd-kit applique automatiquement aria-grabbed aux éléments déplaçables pour indiquer leur état de saisie aux technologies d'assistance. Il utilise aria-dropeffect sur les zones de dépôt pour communiquer ce qui se produira lorsqu'un élément sera déposé. Une région dynamique annonce les mises à jour d'état afin que les utilisateurs de lecteurs d'écran entendent des confirmations comme « Élément saisi » ou « Élément déposé avec succès ».

dnd-kit est conçu pour permettre l'élagage des dépendances : vous n'importez que les éléments réellement utilisés. Aucun CSS n'est fourni : c'est à vous de définir tous les styles visuels, ce qui vous donne un contrôle total sur l'apparence des éléments déplaçables, des superpositions et des zones de dépôt. Cette approche réduit au minimum la taille des paquets.

DndContext fournit trois principales fonctions de rappel pour suivre le cycle de vie du glissement. onDragStart est déclenchée lorsque l'utilisateur commence à déplacer un élément et reçoit l'ID de l'élément actif. onDragOver est déclenchée en continu lorsque l'élément déplacé passe au-dessus des cibles de dépôt. onDragEnd est déclenchée lorsque le glissement se termine et vous fournit l'élément actif ainsi que la cible de dépôt.

Vous transmettez un tableau de configurations de capteurs à DndContext à l'aide de la propriété sensors combinée au hook useSensors. Chaque capteur est initialisé avec useSensor(SensorClass, options). Par exemple, vous pouvez configurer PointerSensor avec une distance minimale de déplacement afin d'éviter les glissements accidentels lors d'un clic.

Les modificateurs transforment les coordonnées du glissement avant leur application à l'élément déplacé. restrictToVerticalAxis verrouille le mouvement dans une seule direction. restrictToParentElement maintient l'élément déplacé à l'intérieur de son conteneur. snapCenterToCursor aligne l'élément afin que son centre suive le curseur. Vous combinez plusieurs modificateurs dans un tableau.

Chaque élément déplaçable ou zone de dépôt doit avoir un ID unique, sous forme de chaîne ou de nombre. Ces ID constituent le principal moyen utilisé par dnd-kit pour suivre ce qui est déplacé et l'endroit où l'élément est déposé. Dans onDragEnd, vous lisez event.active.id pour l'élément déplacé et event.over?.id pour la cible de dépôt afin de mettre à jour l'état de votre application.

Contrairement à de nombreuses bibliothèques de glisser-déposer qui considèrent la prise en charge du clavier comme secondaire, dnd-kit place l'accessibilité au cœur de sa conception. KeyboardSensor est un élément de premier ordre doté des mêmes capacités que PointerSensor. Tous les attributs ARIA sont gérés automatiquement et des annonces personnalisées peuvent être configurées via la propriété accessibility de DndContext.

Quelle touche dnd-kit utilise-t-il pour annuler un glissement au clavier en cours sans effectuer de modification ?

dnd-kit a remplacé react-beautiful-dnd, désormais archivé, comme norme communautaire pour le glisser-déposer dans React. Son architecture s'articule autour de DndContext pour l'état, des capteurs pour l'abstraction des entrées (pointeur, clavier et tactile) et des modificateurs pour les contraintes de mouvement. L'accessibilité est prioritaire : les attributs ARIA, les annonces dans une région dynamique et la navigation complète au clavier sont intégrés.