Tab doesn't close image if focused element is already visible on the screen

[thomasheartman]

Bug description

A clear and concise description of what the bug is.

Assuming that pressing the tab key when an image is zoomed in should close the image and move focus to the next element:
The zoomed-in image doesn't close if the next focused element is currently "on the screen" in the background.

How to reproduce

A list of the steps to reproduce the bug.

(Bug found via the downstream package plugin-image-zoom, but reproduced in the code sandbox provided)

1. Using this package, have a page that can show an image and a link or (other focusable element) at the same time (when the image isn't zoomed in)
   Example as in this screenshot (from the code sandbox):

2. Place focus somewhere on the page that will get hidden by the zoom by tabbing to a focusable element, but make sure the next element to receive focus is also visible.

For instance:

3. Interact with an image to blow it up
4. Use the tab key to navigate through the website in the background.

Expected behavior

A clear and concise description of what you expected to happen.

When you tab while an image is in focus, the image modal closes and your focus returns to the page.

Reproducible example

Link to the bug reproduction

Note that if the next focusable element is not currently "visible" behind the modal, the image will close and focus will move as expected. It's only in cases where the next focusable element is already rendered behind the modal that this crops up.

Environment

• Browser: Firefox 121 and Chrome 120
• medium-zoom version: 1.1.0