https://github.com/thawkin3/accessible-drag-and-drop

This project is meant to teach software engineers how to create drag and drop functionality in React. It includes good examples and bad examples.
https://github.com/thawkin3/accessible-drag-and-drop

a11y accessibility drag-and-drop javascript react

Last synced: 16 days ago
JSON representation

This project is meant to teach software engineers how to create drag and drop functionality in React. It includes good examples and bad examples.

• Host: GitHub
• URL: https://github.com/thawkin3/accessible-drag-and-drop
• Owner: thawkin3
• Created: 2022-10-20T18:16:12.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-10-27T15:10:40.000Z (over 2 years ago)
• Last Synced: 2024-11-27T15:51:10.728Z (3 months ago)
• Topics: a11y, accessibility, drag-and-drop, javascript, react
• Language: JavaScript
• Homepage: http://tylerhawkins.info/accessible-drag-and-drop/build/
• Size: 1.05 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Accessible Drag and Drop

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](https://github.com/facebook/create-react-app).

## Main Takeaways

1. Drag and drop functionality is inherently inaccessible because it requires the use of a mouse and fine motor control.

2. Drag and drop functionality needs to be accessible for mouse users, keyboard users, and screen reader users.

3. Keyboard users should be able to activate drag and drop mode and use the arrow keys to move items.

4. 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.

5. There are many third-party libraries that implement drag and drop functionality, all with varying levels of accessibility support.

## Available Scripts

In the project directory, you can run:

- `build`: Builds the app

- `eject`: Ejects the app from using react-scripts

- `format`: Formats the code using Prettier

- `format-watch`: Formats the code using Prettier in watch mode

- `start`: Starts the app in development mode

- `test`: Runs the tests in watch mode

## Resources

- [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc)

- [dnd-kit](https://github.com/clauderic/dnd-kit)

- [react-dnd](https://github.com/react-dnd/react-dnd/)

- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd)