search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.13k stars 2.52k forks source link

Does not work for most screen readers #2233

Open tiffwong opened 3 years ago

tiffwong commented 3 years ago

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:

JAWS NVDA
Firefox ✔️ ❌
Chrome ❌ ❌
Edge ❌ ❌

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

t1gu1 commented 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!

rajeshdesigner commented 2 years ago

@t1gu1 Do you have any working example?

t1gu1 commented 2 years ago 
<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>
rajeshdesigner commented 2 years ago

@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