Description

When an image block is set to open the image in the lightbox, a transparent button entirely overlays the image.

This button is necessary to open the modal dialog. However, it entirely overlays the image. With the current implementation I see a couple problems that I'd consider pretty serious.

1
The browsers contextual menu that opens on right-click is different depending on the browser in use.

This surprised me. I would have expected to always get the same contextual menu. I have no idea whether this is a browser bug or a 'feature'. Regardless:

• Chrome and Opera open the image contextual menu. This looks 'visually correct' but it's wrong, as the element that actually receives the right-click is the transparent button.
• Firefox and Safari open the button contextual menu. This looks 'visually wrong' but it is actually the correct behavior.

Regardless which browser is right and which one is wrong, the current implementation triggers a behavior that breaks am expected browsers feature. Also, the user experience is pretty confusing in at least two of the major browsers:

• As an user, I see a normal image.
• When right clicking, I would expect to be able to save the image, open it in a new tab, copy the image, etc.
• Instead, the browser contextual menu doesn't show me any of those commands.

2
There is no visual indication at all that the image can be enlarged in a modal dialog

Visually, the image with the lightbox looks exactly like a normal image. There's no visual indication or any other hint to communicate that the image can be clicked and enlarged in the lightbox. The only subtle visual indications are only visible when hovering or tabbing:

• Hovering: the mouse cursor changes to zoom-in.
• Tabbing: the focused 'image' (actually it's the button) shows a focus outline.

Seems to me both cases are insufficient indications.

• On mobile there is no hovering or tabbing. I wonder how users are supposed to understand the image can be enlarged.
• On mobile, users will likely think the image is a normal image. Potentially, they could trigger an unwanted click when scrolling the page and the lightbox would open unexpectedly.
• Also on desktop understanding the image is clickable is not trivial.
• Some users may use devices or assistive technologies that don't use hover or tabbing.
• The mouse cursor change is an unreliable indication as some users may have set a custom cursor at the operating system level.

Step-by-step reproduction instructions

• Add an image block and set it to open in the lightbox.
• Publish and view the front end.
• Test with macOS Chrome and Opera:
  • Right-click the 'image' (reminder that you are actually right-clicking the transparent button)
  • Observe the contextual menu that opens is the one related to the image.
• Test with macOS Firefox and Safari:
  • Right-click the 'image' (reminder that you are actually right-clicking the transparent button)
  • Observe the contextual menu that opens is the one related to the button.

Screenshots, screen recording, code snippet

In the screenshots below, I altered the transparent button to better illustrate the issue:

• I applied a semi-transparent red background to the button to make it visible while keeping the image visible.
• I shifted the button a little to the right and bottom, to be able to right-click the image behind the button.

macOS Chrome and Opera: right-click on the image shows the image contextual menu, as expected:

macOS Chrome and Opera: right-click on the button shows the image contextual menu, this is not expected:

macOS Firefox and Safari: right-click on the image shows the image contextual menu, as expected:

macOS Firefox and Safari: right-click on the button shows the button contextual menu, as expected:

Proposal

I'd think the simplest and most effective solution would be to just not entirely overlay the transparent button over the image. A visible button with an appropriate icon and labelling (preferably an icon + visible text for a11y reasons) would solve both issues:

• right clicking on the image would be consistent in all browsers
• there would be a clear, visible, indication that the image can be enlarged

I think a button in the top right is a pretty common pattern I've seen being used around on the web. Basically, a button placed in the red spot highlighted in the screenshot below:

Ideally, the buton should have visible text:

Enlarge {icon here}

In all cases, the button size should be at least 44 by 44 pixels.

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