Use keyboard to move between 2+ stacked vertical lists

[wschuster-nm]

Bug or feature request?

Feature Request (possibly related to #40)

Expected behavior

To be able to move<Draggable />s with a keyboard between 2 vertical <Droppable />s that are ore aligned 1 above the other and not side by side.
Possibly using shift+arrow or when the item is at the end of a list it attempts to move to a list above/below?

Actual behavior

The only way to use the keyboard to move items between a list is between 2 vertical lists placed side by side, or 2 horizontal lists placed 1 above the other,

Steps to reproduce

Browser version

Demo

https://codesandbox.io/s/6jlyl9rxqk
(https://www.webpackbin.com was broken when I attempted to use it, the preview was unavailable)

[alexreardon]

So cool that you raised this @wschuster-nm. I actually wanted to ship this originally when I was working on keyboard transitioning between lists, but i cut it to reduce scope and get things shipped. I think this feature is really important. I am not sure if we need to introduce the shift addition - my initial thought is that when you get to the bottom of a list pressing down would simply move the thing to a Droppable below if it can.

[wschuster-nm]

Awesome, I completely agree with the "move to next Droppable" idea. Also, thank you for making such a great component.

[illiphilli]

I'd also really like to see this feature. I'm a bit new to React, and this component made it much easier to get DnD up and running pretty quickly. Keyboard Accessibility is very high in my "needs" list, this feature in particular. In my case, I'm replacing an old Flash matching DD component where I have a list of (draggable) options on the left, and stacked droppable on the right. The keyboard dragging, of course, only works with the top drop zone.

[illiphilli]

Hello, and thanks again for the wonderful work on this project. Is there any sense of when this issue might get some traction?

[alexreardon]

We hope to look at it soon(ish)! 😊

[jferrogarcia]

How soon is soon(ish)?

[ChelseaRyanAnderson]

Hi! Our group would love to have this feature too, as it's not considered truly accessible unless a user can achieve all standard actions while utilizing their keyboard :)

[alexreardon]

We hope to start work on this in the coming months. This will go nicely with #331

[RyanCCollins]

Thanks so much for this awesome project!

In the project I work on at work, we have 4 lists stacked vertically. I just discovered from a bug ticket that screenreader users cannot drag the items between the vertical lists. Glad to see that this issue is being worked on. Has any progress been made? This is a crucial feature for our org, so I'd be delighted to hear that this is close to completion. Thanks so much!

[mheavenor]

I would also really like this feature. Is there any update?

[goyalvarun601]

I would also really like this feature. Is there any update?

[devinbinnie]

Also looking to use this feature in https://github.com/mattermost/mattermost-webapp
Is there a workaround present or any update on this feature?

[gaurav5430]

Is there a workaround? May be we can bind our own keyboard events to move Draggables between vertically stacked Droppables, any existing examples for that?

[dsuttonpreece]

Also looking for a workaround…

Would be great to see this feature added asap!

[JamesGelok]

I would also really like this feature. Is there any update?

I would also really like this feature. Is there any update?

I would also really like this feature. Is there any update?

[natedunn]

Checking in on this. Its a pretty big issue preventing our project from being accessible. any word @alexreardon?

[natedunn]

@gaurav5430 @snalld Please update us if you find a work-around! Once I have more time I would like to investigate as well.

[gaurav5430]

Haven't found a workaround. Have not been actively working on this functionality in my app anymore. So, guess I ll wait.

[instadrew]

@alexreardon My organization has made abundant use of this great library, but the lack of this feature prevents our application from being accessible. Is there an update you could provide on if/when this feature will be available?

[jroru]

+1, Thanks for the awesome project, however I would be unable to use react-beautiful-dnd in production without this.

(My use case is slightly different as I have one vertical list and one horizontal list, but I still expect the tail of the first list to be joined to the head of the second via keyboard)

@alexreardon would this require major changes?

[vangelov]

Thank so much for all the effort that went into this library!
Are there any plans for supporting this in the next releases?

[dwjohnston]

I would also really like this feature. Is there any update?

I would also really like this feature. Is there any update?

I would also really like this feature. Is there any update?

I would also really like this feature. Is there any update?

[dwjohnston]

I would just point out that a very simple modification to the original example allows the left and right arrows to work:

https://codesandbox.io/s/throbbing-wildflower-y0gd3?file=/index.js

Just position the lists side by side and the left and right arrows work.

Edit: Aah - I see that that I've misread the original post. Well, just incase anyone else is looking for this, side by side works.

[instadrew]

@alexreardon My organization has made abundant use of this great library, but the lack of this feature prevents our application from being accessible. Is there an update you could provide on if/when this feature will be available?

@alexreardon Could we please have an update on this issue?

[instadrew]

@alexreardon My organization has made abundant use of this great library, but the lack of this feature prevents our application from being accessible. Is there an update you could provide on if/when this feature will be available?

@alexreardon Could we please have an update on this issue?

@alexreardon Could you please provide an update on when this enhancement might be available? The most recent update I can see from you is from 3 years ago (Oct 21, 2018).

[draperd]

https://github.com/atlassian/react-beautiful-dnd#%EF%B8%8F-maintenance--support

[empressmoon]

any update on this one?

[draperd]

See https://github.com/atlassian/react-beautiful-dnd#%EF%B8%8F-maintenance--support

[theboyknowsclass]

so sad... someone even created a PR for this -> #1907