@dnd-kit/accessibility

What is @dnd-kit/accessibility?

@dnd-kit/accessibility is a package that provides accessibility utilities for drag-and-drop interactions in web applications. It is part of the @dnd-kit suite, which is a set of utilities for building drag-and-drop interfaces in React. The package focuses on ensuring that drag-and-drop interactions are accessible to users with disabilities, providing keyboard navigation and screen reader support.

What are @dnd-kit/accessibility's main functionalities?

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>
  );
}

Other packages similar to @dnd-kit/accessibility

react-dnd

react-dnd is a popular library for building complex drag-and-drop interfaces in React. While it provides a robust set of features for drag-and-drop interactions, it does not focus specifically on accessibility. Developers may need to implement additional accessibility features manually.

react-beautiful-dnd

react-beautiful-dnd is another widely-used library for drag-and-drop interactions in React. It offers built-in support for keyboard navigation and screen reader announcements, making it more accessible out-of-the-box compared to react-dnd. However, @dnd-kit/accessibility provides more granular control over accessibility features.

README

@dnd-kit/accessibility

A generic set of components and hooks to help with live region announcements and screen reader instructions. This package is used internally by @dnd-kit/core.