Structure field: sort/move items via keyboard

[FTB-Volmarstein]

Description

Hi there, great job, we love Kirby quite a lot. We have following structure table:

      answerOptions:
        label: Antwortmöglichkeiten
        type: structure
        columns:
          optionImage:
            width: 1/4
          optionLabel:
            width: 1/4
          optionValue:
            width: 1/4

and we would like to be able to edit (and change the order of) the items without the need of using a pointer device like a mouse.

Expected behavior
Either the list items should be in tab-order and the edit-dialog should open on keypress, or the 3-dot-menu should additionally to "Duplicate" and "Remove" contain the actions "Edit", "Move Up", and "Move down".

Screenshots

To reproduce

1. Login to the panel at https://trykirby.com
2. Go to panel/pages/restaurant
3. Try to edit an entry at "Starter" without using the touchpad or mouse.
4. See error

Your setup

Kirby Version
3.8.2 (https://trykirby.com: 3.9.4)

Your system (please complete the following information) Should be platform independent

We absolutely appreciate your efforts in maintaining Kirby as an accessible CMS-solution and therefore this hint to fix even the last problems. Thanks a lot.

[bastianallgeier]

The edit button will be in the next release. Move buttons are planned but need longer.

[distantnative]

@bastianallgeier Do we need move buttons if one could move/sort items via keyboard shortcuts?

[bastianallgeier]

I think if we make the move button / drag handle better and more keyboard accessible, we could also stick with that. It would leave more room for other options in the dropdown.

[lukasbestle]

What about: Arrow up and down on the keyboard moves the item while focus is on the drag handle

[bastianallgeier]

@lukasbestle yep, that sounds ideal. When we combine it with a good label it should be pretty great.

[distantnative]

I tried it but didn't yet find a good solution for this: We hide the drag handle via display: none as long as the row isn't hovered. But because of that, we can also not move the focus on it via the keyboard.

[lukasbestle]

Can we hide it visually instead (similar to the .sr-only class)? I believe the reason for display: none was to skip the handle during keyboard navigation because it cannot be controlled with the keyboard at the moment and would only be confusing once focussed – exactly what we want to change.