@dnd-kit/accessibility

Keyboard Navigation

This feature allows users to navigate and interact with draggable items using the keyboard. The code sample demonstrates how to set up a draggable item with keyboard navigation support using the useKeyboardSensor hook.

import { useDraggable } from '@dnd-kit/core';
import { useKeyboardSensor, useSensor, useSensors } from '@dnd-kit/accessibility';

function DraggableItem() {
  const sensors = useSensors(
    useSensor(useKeyboardSensor)
  );
  const { attributes, listeners, setNodeRef } = useDraggable({ id: 'draggable-item', sensors });

  return (
    <div ref={setNodeRef} {...attributes} {...listeners}>
      Drag me
    </div>
  );
}

Screen Reader Announcements

This feature provides screen reader announcements for drag-and-drop interactions. The code sample shows how to use the useLiveRegion hook to announce the start and end of a drag operation to screen reader users.

import { useDraggable } from '@dnd-kit/core';
import { useLiveRegion } from '@dnd-kit/accessibility';

function DraggableItem() {
  const { attributes, listeners, setNodeRef } = useDraggable({ id: 'draggable-item' });
  const announce = useLiveRegion();

  const handleDragStart = () => {
    announce('Drag started');
  };

  const handleDragEnd = () => {
    announce('Drag ended');
  };

  return (
    <div ref={setNodeRef} {...attributes} {...listeners} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
      Drag me
    </div>
  );
}