New lightbox UI triggers a focus loss

[afercia]

Description

The 'Expand on click' lightbox UI has been moved into the URL input UI in #57608

It appears the new UI hasn't been tested enough with keyboard as there'a a very clear focus loss, possibly more than one, when using the keyboard.

It appears to be one more case where a focusable element that has keyboard focus gets removed from the DOM without any focus management. Since the element that was focused doesn't exist any longer, focus is lost and the tab sequence starts from scratch from the document root.

Animated GIF to illustrate the focus loss:

Step-by-step reproduction instructions

• Add an image block or a Media & text block or any other block where it is possible to add a link to an image.
• Select the image.
• In the block toolbar click the 'Link' button.
• Press the Tab key five times to move focus to the 'Expand on click' suggested item.
• Press the Enter key.
• Observe the UI changes dynamically and the 'Expand on click' item is removed from the DOM.
• Press the Tab key.
• Observe the tab sequence start from scratch from the document root, from the WP logo.

Please text extensively with the keyboard to check for more potential focus losses.

Since this is a new bug in a new UI meant to be released in WP 6.5. it would be nice to fix it for the release. Cc @annezazu

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Thank you for testing and opening! @artemiomorales can you follow up here?

[t-hamano]

I believe this is an existing bug rather than a problem with the new lightbox UI itself.

The video below shows how focus loss occurs even in WordPress 6.4.3.

2e67935d819f37e58c0c15f4bb58a574.mp4

[artemiomorales]

Confirmed that the issue is present in WordPress 6.4.3 as well.

I'm currently looking into this, namely how to manage focus when using the Popover component.
Any guidance or suggestions appreciated!

[t-hamano]

I believe #58647 fixes this issue.