Does anyone have any good resources for making a drag-and-drop list reordering interface accessible to non-mouse users? The lists can be nested.
Using a form seems clunky:
Place item at top level OR inside Item B
Place at start OR after Item C
Reveal up/down arrows to keyboard focus? How do I move items in and out of nested hierarchies? How to I keep the primary list interface from not getting cluttered?
@mez I don't have any resources or web dev experience but I have two thoughts.
Tab/shift-tab is used in word processors to increase/decrease the nesting level of bulleted/numbered list items.
a command (vi) style interface. Type:
i 6 -4 to insert item 6 before item 4,
a 6 4 to add item 6 to the bottom of the sub-list under item 4
m 6 -2 to move item 6 up two places.
@aligorith Yeah, I often check apps like Confluence, Notion, etc. Neither allow re-ordering without drag and drop. Just “move to” (which places it inside another page). Notion’s keyboard accessibility, at least tabbing around, just isn’t there.
I’m wondering about tabbing between items and then ctrl-arrow to move it. Doesn’t solve touch yet and also requires learning hotkeys.
A tools menu may work instead, like you say, but it means more interactions to get to the command.
Making this work for touch would be good too. Small arrows may be hard to hit, drag and drop requires motor skills (and a library that works with touch events 🙄)
Add comment