Gutenberg: Anchor Tags In Gallery Images Are Covered by the Caption, Rendering Them Unclickable

[Steve-MP]

Describe the bug
The Gutenberg Gallery block renders each image with the caption overlaid over the image. This is done by absolute positioning of the figcaption element. Because the caption is not rendered inside the anchor tag which links each image to its source file, the area covered by the caption is not clickable. This is unexpected behaviour from a user perspective and provides a bad experience. Users expect the whole image/caption block to be clickable. Because the figcaption is rendered with a transparent backdrop, it is not clear to the user why the clickable area of the image seems to arbitrarily end half way down the image.

To Reproduce
Steps to reproduce the behavior:

1. Create a post
2. Insert a Gutenberg Gallery block
3. Add an image with a long caption and select Link To: Media File from the block menu to the right of the editor interface
4. Save the post
5. Visit the post page
6. Attempt to click the image at various places - note that the clickable area ends at an arbitrary point.

Expected behavior
The whole image should be clickable, even if a caption is present. If there is a caption, the caption should be included in the anchor tag.

Screenshots

Desktop (please complete the following information):

• OS: OSX Mojave
  
  
  
  • Google Chrome for Mac v. 72.0.3626.121
  
  

Additional context

• The version in Wordpress core 5.1

[youknowriad]

Should we wrap the caption inside the link cc @jasmussen @mapk ?

[jasmussen]

Can we add pointer-events: none; to the caption? I don't know if we can add the caption inside the link, as captions can be multiline (i.e. they are wrapped in P) and a p nested inside an a tag is invalid HTML.

[Steve-MP]

Can we add pointer-events: none; to the caption? I don't know if we can add the caption inside the link, as captions can be multiline (i.e. they are wrapped in P) and a p nested inside an a tag is invalid HTML.

I think that in HTML5 you can wrap an anchor around pretty much anything apart from other interactive elements. Wrapping block level elements like p inside an a is fine.

[mapk]

I think that in HTML5 you can wrap an anchor around pretty much anything apart from other interactive elements.

Let's move in this direction. Are there any a11y issues that we should anticipate regarding this change?

[nosolosw]

Related https://github.com/WordPress/gutenberg/issues/13164

[ashwin-pc]

Hey! I saw the Needs Dev label. I'd love to take this issue up.

[afercia]

Before looking at the PR, I'd like to point out this problem already existed in the pre-Gutenberg era. However, it actually depended on the _theme_.

For example, some of the bundled themes render the classic gallery captions in a way that doesn't overlay the image, see Twenty Seventeen:

Instead, other bundled themes do overlay the caption onto the image e.g. Twenty Fourteen (same for Twenty Thirteen):

So this problem is not new to Gutenberg and it's actually a design issue.

Worth also noting the classic gallery in Twenty Nineteen doesn't overlay the captions:

While the Gutenberg gallery does overlay captions:

So on one hand, Gutenberg makes an opinionated choice and forces the captions to overlay the image. On the other hand, it doesn't provide a solution to the clickable area issue.

I'm not sure forcing this rendering is the best option. To me, this should be handled by the theme and should be a theme author's choice.

Will post accessibility related considerations on the PR.

[mapk]

@ashwin-pc thanks for jumping into this! 👍

[mapk]

I'm not sure forcing this rendering is the best option. To me, this should be handled by the theme and should be a theme author's choice.

Good point @afercia. I wonder if the two different styles can be block style variations as mentioned in this comment.

[afercia]

@maok yep commented also on #11436. I'd totally second your point: style variations could really make sense here.

[gziolo]

@ashwin-pc did some explorations in #11436 which was concluded with the following recommendation:

does the caption need to stay visible when the image is hovered? -> consider to hide it, or truncate it, or reduce its height on hover (or any other "smart" behavior)
Can we try this? Hide the caption on hover if the caption covers the image.

It was also noted by @mapk that this isn't a perfect solution but it's fine to fix the bug:

I'm willing to take this tradeoff because I believe clicking an image to view it at a larger scale is the prefered action here. This PR can work toward this, and in the future we can create a PR that adds another style variation where the captions are below the images.