Image: Duplicate content can be read by screen reader in lightbox

[artemiomorales]

Description

Currently, there's a double image in the lightbox, for the responsive and enlarged image, that cause Safari + VoiceOver to announce 'web dialog with 3 items' when the modal dialog opens:

-The close button
-The first image
-The second image

The first and second images are duplicate content and confusing.

Instead of overlaying the two images, one of them should be hidden and only revealed when necessary (while hiding the other one)

Step-by-step reproduction instructions

1. An image to a post
2. Enable 'Expand on Click' in the block settings
3. Publish and view the post using VoiceOver on Safari
4. Navigate to the lightbox and open it
5. See that VoiceOver erroneously announces that the dialog has three items

Additionally:

• Attempt to use Control + Option + Arrow Keys and see that Safari cycles through the duplicate content.

Screenshots, screen recording, code snippet

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