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.