Accessible Drag-and-Drop

Examples of drag-and-drop patterns that are accessible via mouse, keyboard, and screen reader. The examples use React.

Read more about these interaction patterns in Jesse Hausler's "4 Major Patterns for Accessible Drag and Drop" post on the Salesforce UX blog. Try them out yourself at https://salesforce-ux.github.io/dnd-a11y-patterns/ (docs + demos) or https://salesforce-ux.github.io/dnd-a11y-patterns/#/demo (standalone demos).

Installing

npm install

Running

Launch the examples locally:

npm start

This starts a local server at http://localhost:3000/.

Resources

This project was cloned from universal-drag-and-drop-examples and bootstrapped with Create React App. It uses recommended styles, markup, and interaction patterns from Salesforce's Lightning Design System.