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

React^16.0.0

Share this video with your friends

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

~ 6 years ago

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

Adam Barrett

~ 6 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

~ 6 years ago

Fantastic course

Kang Wei Chan

~ 5 years ago

Incredible course, nice work Alex!!

Clayton

~ 5 years 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

~ 5 years ago

And it clearly works in sandbox. How frustrating.

Ian Jones

~ 5 years 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.

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