Open tiffwong opened 3 years ago
It dont works by default because you have to add some things to make it works on NVDA.
The child element inside Draggable
need to have the draggable
prop.
An other good pratice is to transform things in ul/li.
In the Droppable
child add role="listbox"
. (Tag here should be a UL)
In Draggable
add role role="option"
(Tag here should be a LI)
I add a specefic sentence before the list that mention that user have to use tabulation to navigate between the element of the list. (Cause it don't read everything only with arrow)
I think the pakage should hadle that!
Until that, I hope it will works for you!
@t1gu1 Do you have any working example?
<DragDropContext {...responders}>
<Droppable droppableId="droppable">
{(provided: DroppableProvided) => (
<ul
{...provided.droppableProps}
ref={provided.innerRef}
role="listbox" // **HERE**
>
<Draggable {...}>
{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
<li
{...}
role="option" // **HERE**
draggable
>
...
</li>
)}
</Draggable>
</ul>
)}
</Droppable>
</DragDropContext>
@t1gu1 Thanks, it's working. I am facing one more issue, just to check with you is there any work around. Please check the details below. Issue: Unable to drag the items from one parent to another parent using keyboard on vertical stacked lists. Code structure: // devices.jsx
<DragDropContext>
<Droppable>
<Parent />
</Droppable>
</DragDropContext>
//parent.jsx
<Droppable>
<Child />
</Droppable>
//Child.jsx
<Draggable>
child list items
</Draggable>
Structure: Parent item1
Parent item2
Expected behavior
Drag and drop should work with screen readers
Actual behavior
Dragging via a mouse or keyboard work perfectly without a screenreader but stops working via keyboard when I have a screenreader on. The information read aloud works but pressing spacebar on the focused row doesn't do anything and neither does pressing the arrow keys afterward.
These are the combinations I tried dragging via keyboard:
Steps to reproduce
Go to https://react-beautiful-dnd.netlify.app/?path=/story/accessibility--single-list and try to reorder the list using keyboard only with either JAWS or NVDA on.
What version of
react-beautiful-dnd
are you running?I tested all the browsers with JAWS and NVDA using the storybook examples (https://react-beautiful-dnd.netlify.app/?path=/story/accessibility--single-list) which I assume to be the latest version.
What browser are you using?
Demo
https://www.loom.com/share/68133257a7a14132955b7b32ad901a3d