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!