Reorder via keyboard?

[holloway]

Can the tree be reordered with keyboard? The docs are unclear (does "keyboard navigation" include reordering/dragging?)

[jameskerr]

No, there is no way to re-order with the keyboard as it stands. You can move focus, select, open, close, and activate with the keyboard.

[jameskerr]

I'm curious how that would look. Do you know of other apps that have re-ordering with keyboard?

[holloway]

Yeah the Atlasian React @atlaskit/tree package implements it. Here's someones demo.

Users move to the tree item, press <space>, and then arrow keys to move the item around and <space> to drop it.

[jameskerr]

Interesting. That sounds cool. The space key already opens/closes/activates an item already, so we'd have to make that configurable or assign another key.

57 should account for configuring what space key does

[holloway]

Just fyi there's a draft requirement in WCAG 2.2 currently in which drag (hold-click-and-drag) interactions should also be usable with single clicks, without holding mousedown. This would be for accessibility reasons to help people who don’t have the bodily motor controls to hold-click-and-drag, or maybe don’t have a keyboard available, like tablet users. See https://w3c.github.io/wcag/guidelines/22/#dragging-movements

So just like the keyboard interaction that we're discussing which has several single button presses coordinated to reorder (<space> to 'lift node', then arrows to 'reorder node', finally <space> to 'drop node'), the same would be expected via mouse clicks / screen taps.

WCAG 2.2 isn't saying that conventional drags aren't allowed or they're inaccessible, but that other accessible ways should be supported too.

For Arborist this probably means that it would have to allow multiple buttons per tree node so that you can distinguish between node selecting vs node lifting vs node creating.

I'm happy to contribute this feature if Arborist wants it and if you've got time to discuss the techy approach.

[jameskerr]

I've been thinking about this for the past few days. My editor VSCode lets me move lines of text up and down by pressing control+command+up/down.

That might be a good way to re-order items in the tree with the keyboard. Doing that would avoid another "mode" the tree could be in.

[holloway]

Hmm... two thoughts come to mind...

1) Moving lines of text up and down works because each line can't be rejected as a drop target. In #62 there's the concept of rejecting a drop, and because Arborist can have externally managed data I imagine that some devs have implemented their own drop rejection scheme outside of Arborist. So imagine the scenario of a list that looks like:

Item 1
Item 2 
  - Item 2a
Item 3

Imagine that the user wants to move Item 3 to the top of the list, but while traversing the tree there are some rejected drop locations. So a user couldn't move past those rejections.

So this demonstrates a difference between a mouse-based user who can drag past and only the drop at the final target as a single action. They don't have to drop on every point along the way. A keyboard user needs to be able to drag items and bypass rejections until they get to their final drop target.

2) WCAG study the needs of disabled people who are often disenfranchised from the web through inaccessible techniques. Here are their docs on Trees. As you'll see those key combinations are recommended for other things. Using a mode would solve this problem, like the Atlassian Tree did.

[jameskerr]

Yeah that makes sense. I thing once you switch to the keyboard drag mode, the drop cursor (blue line) would go up and down with the relevant arrows.

Maybe it would skip areas that don't allow drops, or maybe it would render a disabled cursor.

I'd be happy to collaborate on this with you if you feel like digging into the code.

[holloway]

Great, thanks! So what's the first step?

Is it making key bindings configurable, and then adding that mode to move the blue line?

[jameskerr]

Yeah I suppose that would be a good order to do things. I'll write out my thoughts about the configurable bindings in #57

[GermanJablo]

Hey, what about this? supports keyboard out of the box: https://react-spectrum.adobe.com/react-aria/useDrag.html https://react-spectrum.adobe.com/react-aria/useDrop.html

also supports touch, so would fix this: https://github.com/brimdata/react-arborist/issues/191

Or this other library should be released soon and looks very promising.

[bendelaney]

Just piping in here that I would surely love to see reordering via keyboard in Arborist. Ideally, I'd like to use it to do as you said @jameskerr and move lines up/down just as I do in VS Code.

Another example very nice keyboard-based line movement is in the app Craft. They allow for tab and shift+tab to accomplish indent and outdent respectively, so moving a line around between different levels of nesting is also easy and intuitive via the keyboard.

[jameskerr]

Thanks for bring this up again. I'll put this on the feature list for the next major version.

[jameskerr]

@GermanJablo those react-aria libraries look very promising. I would like to replace react-dnd soon.

[timarney]

I just came across this

https://github.com/discord/react-dnd-accessible-backend?tab=readme-ov-file#basic-usage

Has anyone heard of it or tried to use it with this project?