react-sortable-tree icon indicating copy to clipboard operation
react-sortable-tree copied to clipboard

Published 20 hours ago • verified publisher icon frontend-collective

Accessability in react-sortable-tree

Open Aman-Nisha opened this issue 7 years ago • 12 comments

Are there any options to invoke accessibility in react-sortable-tree? drag and drop also with the keyboard.

Aman-Nisha avatar Jan 16 '18 07:01 Aman-Nisha

Not currently, but it is a feature I’m really interested in implementing.

fritz-c avatar Jan 16 '18 09:01 fritz-c

@fritz-c I'm interested in implementing this.

But a little confused. Like vim shortcuts to move things around?

wuweiweiwu avatar Jan 18 '18 02:01 wuweiweiwu

@wuweiweiwu Therein lies the challenge, and the fun. Making an interface that makes sense to use for even a non-technical user. We should talk it out here before you get into implementing it, though.

Hit tab once on the github top page, and you might get an idea of how the mode would be triggered, after which I'm imagining you would navigate a highlighted node about the tree using arrow keys / wasd / hjkl / whatever seems appropriate. I'm admittedly a beginner to a11y, but I'd like to take an opportunity like this to learn more.

fritz-c avatar Jan 18 '18 06:01 fritz-c

@fritz-c Oh I didn't even know that feature existed on github.com.

It seemed like the a11y accordion could be used to expand nodes https://codepen.io/svinkle/pen/mKfru

Seems tricky to navigate when you have modifiable nodes ...

wuweiweiwu avatar Jan 18 '18 06:01 wuweiweiwu

Just read an article that talked about react-beautiful-dnd having keyboard accessibility. I might check that out as an example implementation.

fritz-c avatar Jan 22 '18 22:01 fritz-c

@fritz-c Can you share the article? I would love to read it as well :)

wuweiweiwu avatar Jan 24 '18 05:01 wuweiweiwu

@wuweiweiwu https://medium.com/@alexandereardon/rethinking-drag-and-drop-d9f5770b4e6b

fritz-c avatar Jan 24 '18 06:01 fritz-c

Thanks!

wuweiweiwu avatar Jan 24 '18 22:01 wuweiweiwu

@tx4x If you would like to submit a pull request for that that'll be awesome! :)

wuweiweiwu avatar Mar 04 '18 12:03 wuweiweiwu

@wuweiweiwu I might pick this issue up at some point in the future, I'm thinking of something along the lines of spacebar to pick an item up once it has focus, up down to move within the tree and left right to change indentation, spacebar again to confirm operation and escape to cancel.

Ideally, it'd be nice to also announce the changes that are happening for visually impaired users, but that's a larger undertaking that could happen in a separate PR.

clauderic avatar Feb 09 '19 02:02 clauderic

@clauderic that sounds awesome!

tab to forward focus shft tab to backward focus ...

i think a tricky part will be how we're going to position the item as we're moving it

wuweiweiwu avatar Feb 09 '19 22:02 wuweiweiwu

Need this badly. Tried to integrate "react-dnd-accessible-backend" but not worked. Please help..

demonking99 avatar Apr 05 '22 21:04 demonking99