Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd
react-beautiful-dnd enables users with visual impairments to perform drag and drop operations using only a keyboard and screen reader. This lesson will show you how you can customise the preset react-beautiful-dnd screen reader messaging to power your own domain-specific messaging as well as internationalisation.
We will achieve this by using the aria-describedby prop on a drag handle as well as the announce function which is provided to the DragDropContext callback functions
Thank you for a great course! Definitely have few ideas on how to take advantage of react-beautiful-dnd.
Lesson #14 - Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd, is what totally won me over. I will now absolutely use react-beautiful-dnd for any React application I build that requires DnD
Fantastic course
Incredible course, nice work Alex!!
No matter what I do, I can't get the boxes to move. I've tried it 100 ways, including cutting and pasting all the code after watching the full thing. I get this message in the console: react-beautiful-dnd Invariant failed: Cannot collect without a droppable ref 👷 This is a development only message. It will be removed in production builds. Any ideas about what I can do? I bought a monthly subscription because I liked this course so much.
And it clearly works in sandbox. How frustrating.
Hey Clayton,
Looks like the issue was with styled-components. They changed the api once React.forwardRef was released.
I found the solution in this comment on github
No matter what I do, I can't get the boxes to move. I've tried it 100 ways, including cutting and pasting all the code after watching the full thing. I get this message in the console: react-beautiful-dnd Invariant failed: Cannot collect without a droppable ref 👷 This is a development only message. It will be removed in production builds. Any ideas about what I can do? I bought a monthly subscription because I liked this course so much.
It's possible it's this line: innerRef={provided.innerRef} , which should be ref={provided.innerRef} in any file.