Arquitectura de dnd-kit y diseño centrado en la accesibilidad

react-beautiful-dnd era la biblioteca de referencia para arrastrar y soltar en React, pero se archivó oficialmente en 2023 y ya no recibe mantenimiento. La comunidad adoptó rápidamente dnd-kit como sustituto recomendado, diseñado desde cero teniendo en cuenta React moderno y la accesibilidad.

dnd-kit se basa en tres conceptos arquitectónicos principales: DndContext administra todo el estado del arrastre y coordina los elementos arrastrables y los elementos de destino; los sensors abstraen los métodos de entrada para que la misma lógica de arrastre funcione con el ratón, la pantalla táctil y el teclado; y los modifiers permiten ajustar, restringir o transformar el movimiento del arrastre.

dnd-kit incluye tres sensores integrados. PointerSensor gestiona la entrada del ratón y de la pantalla táctil mediante la API unificada Pointer Events. KeyboardSensor habilita el arrastre y la suelta usando únicamente el teclado. TouchSensor gestiona los eventos táctiles heredados. Configure los sensores mediante la propiedad sensors de DndContext.

dnd-kit incorpora navegación mediante el teclado para facilitar la accesibilidad. Los usuarios pulsan Espacio para recoger un elemento, las teclas de flecha para moverlo a una nueva posición, Espacio de nuevo para soltarlo y Escape para cancelar el arrastre sin realizar cambios. Estas interacciones se anuncian automáticamente a los lectores de pantalla.

dnd-kit aplica automáticamente aria-grabbed a los elementos arrastrables para indicar su estado de sujeción a las tecnologías de asistencia. Usa aria-dropeffect en las zonas donde se pueden soltar elementos para comunicar qué ocurrirá al soltar uno. Una región dinámica anuncia las actualizaciones de estado para que los usuarios de lectores de pantalla oigan confirmaciones como "Elemento recogido" o "Elemento soltado correctamente."

dnd-kit está diseñado para admitir tree shaking, lo que significa que solo importa las partes que realmente utiliza. No incluye CSS integrado: usted se encarga de todos los estilos visuales, lo que le proporciona un control total sobre la apariencia de los elementos arrastrables, las superposiciones y las zonas de suelta. Esto mantiene el tamaño del paquete al mínimo.

DndContext proporciona tres callbacks de eventos principales para seguir el ciclo de vida del arrastre. onDragStart se ejecuta cuando el usuario comienza a arrastrar y recibe el ID del elemento activo. onDragOver se ejecuta continuamente mientras el elemento arrastrado se mueve sobre destinos donde se puede soltar. onDragEnd se ejecuta cuando termina el arrastre y proporciona el elemento activo y el destino de suelta.

Pase un array de configuraciones de sensores a DndContext mediante la propiedad sensors combinada con el hook useSensors. Cada sensor se inicializa con useSensor(SensorClass, options). Por ejemplo, puede configurar PointerSensor con una distancia mínima de arrastre para evitar arrastres accidentales al hacer clic.

Los modifiers transforman las coordenadas del arrastre antes de aplicarlas al elemento arrastrado. restrictToVerticalAxis bloquea el movimiento en una sola dirección. restrictToParentElement mantiene el elemento arrastrado dentro de su contenedor. snapCenterToCursor ajusta el elemento para que su centro siga el cursor. Puede combinar varios modifiers en un array.

Cada elemento arrastrable y cada elemento donde se puede soltar necesitan un identificador único de tipo string o number. Estos identificadores son la forma principal en que dnd-kit sigue qué elemento se está arrastrando y dónde se está soltando. En onDragEnd, lea event.active.id para obtener el elemento arrastrado y event.over?.id para obtener el destino de suelta y actualizar el estado de la aplicación.

A diferencia de muchas bibliotecas de DnD que consideran la compatibilidad con el teclado algo secundario, dnd-kit sitúa la accesibilidad en el centro de su diseño. KeyboardSensor es un componente de primera clase con las mismas capacidades que PointerSensor. Todos los atributos ARIA se gestionan automáticamente y puede configurar anuncios personalizados mediante la propiedad accessibility de DndContext.

¿Qué tecla utiliza dnd-kit para cancelar un arrastre de teclado en curso sin realizar cambios?

dnd-kit sustituyó a react-beautiful-dnd, ya archivada, como estándar de la comunidad para arrastrar y soltar en React. Su arquitectura gira en torno a DndContext para el estado, sensors para abstraer la entrada (Pointer, Keyboard, Touch) y modifiers para restringir el movimiento. La accesibilidad es prioritaria: incorpora atributos ARIA, anuncios mediante regiones dinámicas y navegación completa con el teclado.