Block gallery: add support for image reordering

[oandregal]

This PR implements the basic mechanics to move the selected image forward/backward within a gallery. Also adds the corresponding visual controls.

[oandregal]

cc @jasmussen

[ellatrix]

Why limit it to the plugin only?

[oandregal]

Why limit it to the plugin only?

Developing this only for the plugin provides a safe space for experimentation. This is why I like that space: I consider this PR the first step in adding DragNDrop support for galleries, and there are a couple of different options we can use as the drag handle for the selected image. These controls may be affected by that later decission, so I wouldn't want to introduce them to only change them in a later iteration, if needed.

[ellatrix]

Cool, was asking because these controls already seem quite valuable to users.

[jasmussen]

Really nice work. Perhaps you're already on this, but I'm not seeing the controls show up in the forwards tabbing order, and I'm seeing some weird tabbing behavior that may be already present in master. GIF:

First issue: when I tab, I first select the image, then the caption, then the next image. But the previous image still stays in what appears to be a focused state. When I tab on to the next thumbnail, the previous thumbnail should no longer be focused.

The 2nd issue is, I would expect the tabbing order to be:

1. Thumbnail
2. Move left if not disabled
3. Move right if not disabled
4. Remove image
5. Caption
6. Next thumbnail, etc.

Is this within workable?

[oandregal]

First issue: when I tab, I first select the image, then the caption, then the next image. But the previous image still stays in what appears to be a focused state. When I tab on to the next thumbnail, the previous thumbnail should no longer be focused.

This is also an issue on master that I've filled at #14800 and prepared a fix for at #14813

The 2nd issue is, I would expect the tabbing order to be (controls and the caption).

This is also an issue on master: note how the delete control is only focused when you tab backward.

I'd like to tackle this separately and receive some a11y feedback. My first thought when I saw it was: "well, this is not what I expected but perhaps is a good thing because it shortens the keyboard jumps I have to do for the common actions (move through images/edit captions/etc.)".

I'm also open to fix this here if you feel like adding the moving controls totally change the expectations of what the common actions are, though.

[jasmussen]

Okay to tackle separately for sure, but definitely something we'll want someone to tackle at some point.

"well, this is not what I expected but perhaps is a good thing because it shortens the keyboard jumps I have to do for the common actions (move through images/edit captions/etc.)".

Yes, but unfortunately it does so at the cost of inconsistency and unpredictability.

[oandregal]

Okay to tackle separately for sure, but definitely something we'll want someone to tackle at some point.

I meant that I will fix this as part of my work with the gallery! Tracked at #14814

[oandregal]

Note that the fix for two images being selected has already landed in master so I've rebased this branch to include it here.

[youknowriad]

Let's try to find a way forward here, can we always show the controls but "visibly hidden" if the block is not selected, that way the tab order is always consistent? Also it seems that when you tab to the image, the container should be focused first.

[oandregal]

Second attempt to fix the gallery tab order can be reviewed at #15540 The idea would be to merge that and then rebase this PR on top.

[oandregal]

The fix for the tab order has landed and this has been rebased. It's ready for another review round!

cc @youknowriad @jasmussen

[youknowriad]

Is it just me or the arrow buttons are not working anymore?

[youknowriad]

This is working great for me, I'll leave the final word for the others.

[oandregal]

@jasmussen would you try this and 👍 if appropriate?

[jasmussen]

This is a remarkable improvement. Really well done. It is foundational accessibility built well: