Block gallery: focus is lost when an image is removed from the gallery

[oandregal]

Reported at #14822 (comment) by @afercia

When the selected image (currently focused element) gets removed, there's no focused element any longer so a focus loss happens.

Focus should be moved to the most logical place. Not sure what the best place is 🙂 Ideally:

• to the previous image, if any
• otherwise to the following image, if any
• otherwise if it's the last image: to the block focusable container

I do realize this would be complicated so I'd be OK with always moving focus to the block focusable container: at least it would avoid a complete focus loss.

[talldan]

Hey @nosolosw - I couldn't reproduce this one any more, it looks like focus ends up at the block wrapper.

I also couldn't use delete/backspace to remove a gallery image any more, so maybe that's a separate bug!

[oandregal]

Tested in Firefox and Chrome and I can't reproduce either.

[afercia]

Chromium and Firefox implement a sort of smart feature: when there's a focus loss, they try to start the tab order from the closer, previous, tab stop they can find.

Chromium calls this "sequential focus navigation starting point". See https://bugs.chromium.org/p/chromium/issues/detail?id=454172

This must not be confused with keyboard focus. When an element is removed from the DOM and focus is not managed programmatically, there is a focus loss. No element at that point has keyboard focus.

Other browsers don't have the same (proprietary) behavior. Chromium and Firefox themselves might fail when ran in combination with assistive technologies.

To test:

• put something in some CSS (or build a small plugin as I do) to override any focus style with a rule that makes very evident where focus is. I use:

:focus {
	outline: 2px solid #c30 !important;
}

• use higher specificity if necessary
• add a gallery block with some images
• use the keyboard
• see elements that receive focus have a red outline
• remove one of the gallery images
• no element has a red outline: focus is lost
• alternatively: test with a browser that doesn't implement "sequential focus navigation starting point"

I guess this can also be deduced by lack of focus management in the related code.

See the animated GIF below

[glendaviesnz]

I just retested with the refactored gallery, and now that the images are nested Image blocks the issues is not quite as bad. If the first image in the gallery is deleted the problem is the same and nothing is focused after the delete, but if one of other images is deleted focus moves to the caption of the previous Image block.

[glendaviesnz]

Going to close this as it relates to the gallery block prior to the refactor to nested image blocks.