Make it possible to re-order things without using drag & drop

[manuhabitela]

Describe the problem to be solved

:wave:

Drag & drop is currently used to order a few things in the app:

• columns of a table
• pages in the left sidebar
• other things I didn't notice?

This is great but it I didn't find any alternative way of ordering those elements. That means a few things:

• if I can't use a mouse at all and rely exclusively on the keyboard to interact with Grist, I can't order things,
• if I can't use a mouse precisely enough, or if it's difficult for me to have the mouse button pressed while doing the whole drag action, I can't order things.

WCAG source: https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements

Describe the solution you would like

We can think about multiple different solutions to let people re-order things without drag & drop:

• in the left sidebar, have the "drag" icon of a page focusable with keyboard. We could then activate it with Enter key and enter a "re-order mode", where pressing the up and down keys would move the item
• in an item menu (were we can rename a page or a column), we could add items to move the item up/down or left/right.

Having the action available through the item menu would certainly be the simplest to implement, while covering all usecases: both users who rely exclusively on keyboard, and mouse users who have too much trouble performing drag&drop movements.

[dsagal]

Other features that rely on dragging:

• You can drag groups of columns
• You can drag rows or groups of rows (except in sorted views).
• In the creator panel on the right, you can drag columns in the widget configuration to reorder them, and also drag columns between visible and hidden sections.
• Pages in the left sidebar can be dragged not only up and down, but also dropped "inside" another page to create a hierarchy, and move things to different levels of the hierarchy.
• With more than one widget on a page, widgets can be dragged near the edges of other widgets to create custom page layouts.
• When editing Card layout, fields may be dragged (using the same component as widgets on a page) to create custom card layouts.
• Forms support dragging of fields to reorder them and change layout.
• Conditional styles (for a column or for a table) can be dragged in the creator panel to reorder them.

[manuhabitela]

You definitely are the GOAT (Gristman of all time). Thanks for the input.

I actually used some of those but forgot them. And you made me discover things.

Thanks!

[lusebille]

Link to figma mocks : https://www.figma.com/design/wcpetFt6aOKzTszcvPPWLQ/%5B05%2F24%5D-Grist-Design?node-id=2477-140249&t=qX4iHFYd8uzsW8kZ-1

[manuhabitela]

I like the fact that the drag icons are always-visible in the suggested mockup! I personally felt it wasn't that obvious we could re-order them in this part of the UI.

I also think exposing a shortcut to this UI part in widget menu is a good idea as we might be used to re-order columns through this menu in other spreadsheet softwares.

Specifically about keyboard, one idea would be to be able to focus a drag icon, being able to activate it with Enter, and then press arrows keys to re-order things.

Not quite so sure about the "Move" item in a column menu, then being able to use keyboard arrows. In short term at least. Making current UI keyboard-accessible feels more straight-forward.

[lusebille]

I added #1297 for the UI part so I moved this ticket to Ready to Dev