React-beautiful-dnd: 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?

[snalld]

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.