This project is meant to teach software engineers how to create accessible drag and drop functionality in React. It includes good examples and bad examples.
This project was bootstrapped with Create React App.
- Drag and drop functionality is inherently inaccessible because it requires the use of a mouse and fine motor control.
- Drag and drop functionality needs to be accessible for mouse users, keyboard users, and screen reader users.
- Keyboard users should be able to activate drag and drop mode and use the arrow keys to move items.
- Screen reader users should have adequate instructions and communication to know how to interact with the drag and drop functionality and also to know what is happening throughout the interaction.
- There are many third-party libraries that implement drag and drop functionality, all with varying levels of accessibility support.
In the project directory, you can run:
build
: Builds the appeject
: Ejects the app from using react-scriptsformat
: Formats the code using Prettierformat-watch
: Formats the code using Prettier in watch modestart
: Starts the app in development modetest
: Runs the tests in watch mode