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

Alex Reardon
InstructorAlex Reardon

Share this video with your friends

Send Tweet
Published 4 years ago
Updated a year ago

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

Instructor: [00:02] React-beautiful-dnd enables users with visual impairments to perform drag and drop operations using only a keyboard and a screen reader. I have turned on voice over, which is the screen reader that is built into Mac OSX.

Automated Voice: [00:15] Take out the garbage. Draggable item. Press spacebar to lift. You have lifted an item in position one. Use the arrow keys to move, spacebar to drop, and escape to cancel. You have moved the item to position two. You have moved the item to position three. You have dropped the item. It has moved from position one to three. Voice over off.

Instructor: [00:33] We were able to drive our application using only a keyboard and a screen reader without having to make any additional changes. React-beautiful-dnd ships with English messaging for screen reader out of the box. All of the messaging that is read out by the screen reader is able to be controlled by you.

[00:50] You can do this if you wanted to make the messaging more specific to your application, or if you wanted to support languages other than English. We can use the area roll description prop on a drag handle to control the messaging that occurs when a drag handle is focused on.

[01:07] In this message, we advise that you instruct a user on how to start a drag. You can control the screen reader messages during a drag and drop interaction by using the drag drop context callback functions.

[01:25] I will now wire up an on drag start and on drag update callback. All of the drag drop context callback functions are supplied with a second argument called provided. This object contains a property called announce, which is a function.

[01:55] The announce function can be called with a string to announce messages to the screen reader. If the announce function is not called, then react-beautiful-dnd will use its default English messaging. In our on drag start function, we are announcing the position that the task is started in.

[02:19] In our on drag update function we are announcing the current position of the draggable, if there is one, or we're letting the user know that they are not over a droppable area. In our on drag end function, we are letting the user know what position the drag was started in and what position it finished in.

[02:43] We are also providing a fallback messaging for when there was no drop target. Let's take a look at the impact of our changes.

Automated Voice: [02:51] Press spacebar to lift the task. You have lifted the task in position one. You have moved the task to position two. You have moved the task from position one to two. Voice over off.

Instructor: [03:02] We have created a screen reader guide on the react-beautiful-dnd repo, which contains suggestions for the tone of your messages and their content throughout the drag and drop life cycle.

Nico Hartto
Nico Hartto
~ 4 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
~ 4 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
~ 3 years ago

Fantastic course

Kang Wei Chan
Kang Wei Chan
~ 3 years ago

Incredible course, nice work Alex!!

Clayton
Clayton
~ 2 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
Clayton
~ 2 years ago

And it clearly works in sandbox. How frustrating.

Ian Jones
Ian Jones
~ 2 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.

~ 2 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.