Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab.

[namankhare]

What?

Closes #75801

Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab.

Why?

When a Gallery block has the lightbox option enabled and a user opens the lightbox on the frontend, pressing Tab repeatedly causes focus to escape outside the lightbox. The focus indicator disappears entirely, leaving no visual feedback on where the user is on the page.

• Duplicate overlay elements in the DOM. Each lightbox-enabled image registers a separate wp_footer callback using an anonymous closure. WordPress treats each closure as a unique callback, so the overlay HTML is printed once per image instead of once per page. This was introduced in Gallery: Add lightbox support #62906 (676fabe8cd), which inadvertently changed the original named function reference to a closure. With duplicate overlays, document.querySelectorAll('.wp-lightbox-navigation-button') returns buttons from all overlays, breaking the focus trap boundary logic.

How?

The lightbox overlay is rendered once per lightbox-enabled image instead of once per page. Each call to block_core_image_render_lightbox() registers a new wp_footer callback using an anonymous closure. WordPress treats each closure as a unique callback, so the overlay HTML is printed multiple times.

Testing Instructions

• Add a Gallery block to a page/post.
• Enable the lightbox option for the gallery.
• Open the published page and open the lightbox by clicking on an image.
• Navigate using the Tab key repeatedly.

Screenshots or screencast

75801.-.Fix.mov

Before	After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @Gierand.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: Gierand.

Co-authored-by: namankhare <namankhare@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @namankhare! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[t-hamano]

LGTM! Thanks for the great research and fix.

To be precise, I introduced closures in f849597, but I can't remember why 😅 I've tested it thoroughly, and it should be fine to revert to the previous code.

What's even better is that this PR improves screen reader behavior.

Previously, the Enlarged image X of Y was read multiple times each time you pressed the button.

Before

before.mp4

After

after.mp4

[github-actions]

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 1745de5