Accessability in react-sortable-tree

[Aman-Nisha]

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

[fritz-c]

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

[wuweiweiwu]

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

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

[fritz-c]

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

[wuweiweiwu]

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

[fritz-c]

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

[wuweiweiwu]

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

[fritz-c]

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

[wuweiweiwu]

Thanks!

[wuweiweiwu]

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

[clauderic]

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

[wuweiweiwu]

@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

[demonking99]

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