Customize Screen Reader Messages for Drag and Drop with react-beautiful-dnd

InstructorAlex Reardon

Share this video with your friends

Send Tweet

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

Nico Hartto
Nico Hartto
~ 3 years ago

Thank you for a great course! Definitely have few ideas on how to take advantage of react-beautiful-dnd.

Adam Barrett
Adam Barrett
~ 2 years ago

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

Alexander
Alexander
~ 2 years ago

Fantastic course

Kang Wei Chan
Kang Wei Chan
~ 2 years ago

Incredible course, nice work Alex!!

Clayton
Clayton
~ 9 months ago

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.

Clayton
Clayton
~ 9 months ago

And it clearly works in sandbox. How frustrating.

Ian Jones
Ian Jones
~ 9 months ago

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

Here's my example code sandbox.

~ 7 months ago

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.