Arquitetura do dnd-kit e design priorizando a acessibilidade

O react-beautiful-dnd era a biblioteca preferida de arrastar e soltar para React, mas foi oficialmente arquivado em 2023 e não recebe mais manutenção. A comunidade rapidamente adotou o dnd-kit como substituto recomendado, projetado do zero tendo em mente o React moderno e a acessibilidade.

O dnd-kit é construído em torno de três conceitos arquiteturais principais: DndContext gerencia todo o estado do arrasto e coordena os elementos arrastáveis e os destinos de soltura; sensores abstraem os métodos de entrada para que a mesma lógica de arrasto funcione com mouse, toque e teclado; e modificadores permitem encaixar, restringir ou transformar o movimento do arrasto.

O dnd-kit inclui três sensores integrados. PointerSensor lida com entradas de mouse e toque por meio da API unificada de eventos de ponteiro. KeyboardSensor permite arrastar e soltar usando exclusivamente o teclado. TouchSensor lida com eventos de toque legados. Você configura os sensores por meio da prop sensors em DndContext.

O dnd-kit oferece navegação por teclado integrada para acessibilidade. Os usuários pressionam Espaço para pegar um item, Teclas de seta para movê-lo para uma nova posição, Espaço novamente para soltá-lo e Escape para cancelar o arrasto sem fazer alterações. Essas interações são anunciadas automaticamente aos leitores de tela.

O dnd-kit aplica automaticamente aria-grabbed aos itens arrastáveis para indicar seu estado de captura às tecnologias assistivas. Ele usa aria-dropeffect nas zonas de soltura para comunicar o que acontecerá quando um item for solto. Uma região dinâmica anuncia atualizações de status para que os usuários de leitores de tela ouçam confirmações como "Item capturado" ou "Item solto com sucesso."

O dnd-kit foi projetado para permitir a eliminação seletiva de código, o que significa que você importa apenas as partes que realmente usa. Não há CSS incluído — todo o estilo visual é responsabilidade sua, oferecendo controle total sobre a aparência dos elementos arrastáveis, das sobreposições e das zonas de soltura. Isso mantém os tamanhos dos pacotes mínimos.

O DndContext fornece três callbacks de eventos principais para acompanhar o ciclo de vida do arrasto. onDragStart é acionado quando o usuário começa a arrastar e recebe o ID do item ativo. onDragOver é acionado continuamente enquanto o item arrastado se move sobre destinos de soltura. onDragEnd é acionado quando o arrasto termina, fornecendo o item ativo e o destino de soltura.

Você passa um vetor de configurações de sensores para DndContext usando a prop sensors combinada com o hook useSensors. Cada sensor é inicializado com useSensor(SensorClass, options). Por exemplo, você pode configurar o PointerSensor com uma distância mínima de arrasto para evitar arrastos acidentais ao clicar.

Os modificadores transformam as coordenadas do arrasto antes que elas sejam aplicadas ao elemento arrastado. restrictToVerticalAxis limita o movimento a uma única direção. restrictToParentElement mantém o item arrastado dentro do contêiner. snapCenterToCursor encaixa o elemento de modo que seu centro acompanhe o cursor. Você combina vários modificadores em um vetor.

Todo elemento arrastável e todo destino de soltura precisam de um ID exclusivo, que pode ser uma cadeia de caracteres ou um número. Esses IDs são a principal forma de o dnd-kit acompanhar o que está sendo arrastado e onde será solto. Em onDragEnd, você lê event.active.id para obter o item arrastado e event.over?.id para obter o destino de soltura e atualizar o estado da aplicação.

Ao contrário de muitas bibliotecas de arrastar e soltar que tratam o suporte ao teclado como algo secundário, o dnd-kit coloca a acessibilidade no centro de seu projeto. O KeyboardSensor é um componente de primeira classe, com os mesmos recursos do PointerSensor. Todos os atributos ARIA são gerenciados automaticamente, e anúncios personalizados podem ser configurados por meio da prop accessibility no DndContext.

O dnd-kit substituiu o react-beautiful-dnd, que foi arquivado, como padrão comunitário para arrastar e soltar no React. Sua arquitetura gira em torno do DndContext para o estado, dos sensores para a abstração da entrada (Ponteiro, Teclado e Toque) e dos modificadores para as restrições de movimento. A acessibilidade é prioridade: atributos ARIA, anúncios em regiões dinâmicas e navegação completa pelo teclado já vêm integrados.