Use keyboard to move between 2+ stacked vertical lists

wschuster-nm commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

illiphilli commented 6 years ago

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 commented 6 years ago

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

alexreardon commented 6 years ago

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

jferrogarcia commented 6 years ago

How soon is soon(ish)?

ChelseaRyanAnderson commented 5 years ago

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 commented 5 years ago

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

RyanCCollins commented 5 years ago

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 commented 4 years ago

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

goyalvarun601 commented 4 years ago

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

devinbinnie commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Also looking for a workaround…

Would be great to see this feature added asap!

JamesGelok commented 4 years ago

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 commented 3 years ago

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

natedunn commented 3 years ago

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

gaurav5430 commented 3 years ago

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

instadrew commented 3 years ago

@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 commented 3 years ago

+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 commented 3 years ago

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

dwjohnston commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

@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).