Block gallery: wrong tab order

[oandregal]

When you tab through images within a gallery, the tab order is:

• image
• caption

Note that to access the remove control at the top right you have to focus backward. The tab order should instead be:

• remove control of the image selected
• caption

GIF:

[oandregal]

There is a proposal to fix this at #14821

[oandregal]

Copied over from #14931 as per @afercia feedback:

---

Noticed while testing #14822

In the gallery images, the order of the elements should be improved. Currently, the order is:

• "Remove Image" button (see block-library-gallery-item__inline-menu)
• the image (which is focusable)
• the caption field

With this order, there are at least 2 issues:

• when using a keyboard, the "Remove Image" button gets skipped because it appears after the image is focused
• even if it wasn't skipped, the "Remove Image" button doesn't give any context on which image it will remove because it's before any relevant information related to the image

I'd propose to:

• move the "Remove Image" button after the image: shouldn't be a big problem as it's absolutely positioned
• make sure the button appears both when tabbing forward and when tabbing backwards

[afercia]

move the "Remove Image" button after the image: shouldn't be a big problem as it's absolutely positioned

This would probably replicate the problem when tabbing backwards. I do realize rendering elements conditionally is very react-ish but sometimes that's not great for keyboard accessibility and tab order. For a similar issue with the Button component, see #10128 (comment)