Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using keyboard to switch a Draggable between Droppables #915

Closed
NunoCardoso opened this issue Nov 13, 2018 · 1 comment
Closed

Using keyboard to switch a Draggable between Droppables #915

NunoCardoso opened this issue Nov 13, 2018 · 1 comment

Comments

@NunoCardoso
Copy link

NunoCardoso commented Nov 13, 2018

Bug or feature request?

I guess either a bug or nothing, depends on what is happening

This is the interface I am working on. In the right side I have PDF pages, and I want to drag pages into the left area.

pdf

The grey areas are Droppables. The pages are Draggables. There is an accordion-type component in the left, as I want to pick pages to generate up to 4 different PDFs.

There is only one Droppable component open at each time; when Ichange the active accordeon page, the Droppable is destroyed and then another Droppable is created.

All works well with mouse drag and drop. No problems at all. My concerns are with accessibility issues, and using the keyboard only.

Expected behavior

When I select a page in the Droppables on the right, with the keyboard (using space bar), I should be able to move the selected Draggable to the Droppable in the left, by using the keyboard arrow keys.

Actual behavior

The selected Draggable doesn't move to the Droppable in the left, with keyboard arrow keys. It does move to the other Droppables on the right, though.

All the Droppables are under the same DragDropContext, but not at the same level, i.e., the left Droppable is not a sibling of right Droppables, but right Droppables are siblings. Also, right Droppables are easier to see whether we should use up or down arrow to change Droppables, but to change into the left Droppable, none of the arrow keys work.

What version of React are you using?

latest

What version of react-beautiful-dnd are you running?

latest

What browser are you using?

Chrome 70

Edit: Possible duplicate of #331, apologies if so. If this is part of the requested feature, then chalk +1 as a feature we definitely need to make our page more accessible to people who can't use mouse.

@alexreardon
Copy link
Collaborator

I think it is a duplicate of #331 - moving cross axis with a keyboard. We hope to work on that soon!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants