Image: Close button in the lightbox hard to see with dark images

[gziolo]

Description

When using the lightbox behavior for the Image block that contains a dark image, it displays the Close button in a way that is hard to see it.

Step-by-step reproduction instructions

1. Activate the experiment that enables Interactivity API and Behaviors.
2. Go to the post editor.
3. Upload an image with a dark area around borders, for example:

4. Set the Resolution to Full Size. Alternatively, it might work with different settings depending on the screen-size used.
5. In the advanced settings for the Image block, activate the lightbox behavior.
6. Publish the post.
7. Navigate to the post on the front end.
8. Open the lightbox and check whether the Close button is correctly displayed.

Screenshots, screen recording, code snippet

Editor view:

---

Frontend view:

---

Lightbox view:

Environment info

• WordPress 6.2, Gutenberg latest (trunk)

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

[artemiomorales]

@jasmussen @SaxonF @jameskoster How should we handle this? I'd like to resolve this using just CSS if possible. Should we just add a white border around the close button?

[artemiomorales]

Here's an example of what the close button with a white border might look like on dark images:

[jasmussen]

I appreciate the iteration and care with which this is being considered. I know a lot of effort went into this, so please forgive me if I'm re-treading older conversations.

The main thing is, it still isn't entirely clear to me why we need an explicit close button always visible, as there is a clear zoom-out cursor for sighted users, and Esc takes you out of it as well. Could a focus-visible approach be taken, in that if you use keyboard navigation to focus the image, press Enter to zoom in, then the close button is visible and focused? If we can do that, we can simply add a circular black semi-transparent (say 60%) background beneath a white X.

The bordered X as shown above isn't working so well.

[artemiomorales]

@jasmussen Thank you for the ideas, and no worries, I think it can be good to have a more focused conversation around the close button now that many other parts of the lightbox have been implemented.

I believe the close button should always be visible because otherwise, the interface is unclear for folks who navigate using voice input. I'll ping in @andrewhayward, @alexstine, and @joedolson for additional insight and see if the focus-visible approach or some variation could be appropriate.

[alexstine]

Back when I was visually impaired and not totally blind, I always used close buttons on popups. That was before I had to learn every keyboard shortcut under the sun and clicking outside was always tricky due to magnification programs I used such as ZoomText. There is no reason to not have a visible close button. Why design in this project is so against it is totally beyond me but sometimes there is a reason the basics are the basics.

[jasmussen]

Understood, thank you. Here are mockups that keep the close button, and make it work with sufficient contrast. Single image lightbox:

• Behind the popover there is a scrim, and the close button sits in the scrim area, as opposed to being overlaid on the image itself.
• This scrim is the same color as the site background color, but e.g. 60% opaque. The close button is then set to currentColor, so the combination of the theme bg color and text color of the icon ensures there's alwasy as much contrast as the theme itself provides between text and background, while stille providing some theme/color integration.

Multiple images lightbox:

• This one is more theoretical around how the lightbox could work across a gallery where you might paginate from one image to the next while staying inside the lightbox. In this mockup, there are chevron arrows for navigation, left and right of the image.

[luisherranz]

Back when I was visually impaired and not totally blind, I always used close buttons on popups. That was before I had to learn every keyboard shortcut under the sun and clicking outside was always tricky due to magnification programs I used such as ZoomText.

I'm trying to understand this a bit better.

@alexstine, per your comment, it seems to me that the problem you describe happens when the popup doesn't have a close button and needs to be closed by clicking outside of the popup.

• Is that the case?
• If so, would the same problem be present when the popup is closed by clicking anywhere on the screen (either outside or inside)?

[alexstine]

@luisherranz Yes and yes. A close button definitively tells a user what is going to happen when they click it and it is generally in view. A click inside would be really disruptive if someone missed a click target. Not a pattern we should adopt for the project. ZoomText is a very expensive program, I wish I knew of something that could replicate the experience so you can understand how a zoomed in view could make it very hard for visually impaired users to click on space outside of a pop-up.

[luisherranz]

I knew of something that could replicate the experience so you can understand how a zoomed in view could make it very hard for visually impaired users to click on space outside of a pop-up.

That's easy to understand, don't worry 🙂

A click inside would be really disruptive if someone missed a click target

May I ask what do you mean by "missing a click target"?

Thanks, Alex! 🙏

[joedolson]

One of the goals in accessibility is to support the multi-modal nature of user experience. Users should be able to accomplish their tasks using any of the standard mechanisms they're like to know and understand. Not all users are able or willing to experiment to try and find how they do something; and many users will become easily frustrated if they are forced to do this.

It's also important to remember that it will be very easy for a user to activate these lightboxes by accident; they're a large clickable area (the image) with no visually obvious activation control. So there could be frustration present even before the user searches for the close mechanism.

So being able to close the lightbox either by clicking on a close button with an expected look and location, clicking outside the image, or pressing esc are all important modalities that a user may expect and try first.

[luisherranz]

Just to understand and confirm, and apologies for being insistent.

So, even if we do all this:

1. We show the close button when the user uses the keyboard to open the expanded image.
2. We make it so all possible user interactions close the expanded image:
   • By clicking or tapping anywhere on the screen (outside or inside the popup).
   • By using any keyboard key (space, enter, esc, tab…).
   • By scrolling up or down.
3. We give visual indications by replacing the cursor with the zoom-in cursor on hover when it's closed and zoom-out cursor when it's open.

Is there still a need for a close button on click?

If so:

• Can there be a situation where a popup doesn't have a close button? What would that look like?
• How do native mobile apps deal with this situation? Why don't most of them have such close buttons on those types of interactions? Is this requirement only present on the web and/or only present on desktop?

[alexstine]

@luisherranz

How do native mobile apps deal with this situation? Why don't most of them have such close buttons on those types of interactions? Is this requirement only present on the web and/or only present on desktop?

If mobile apps do not have close, cancel, or back buttons, this is an accessibility failure completely as there is no escape or click outside for assistive tech users. If anything, it is essential for mobile and high priority for desktop. I do not envision a situation where a pop up or modal should never have a close button.

Thanks.

[joedolson]

As Alex mentions, "click outside" may not exist for mobile or low vision visitors. A screen reader in reading mode may not scroll using arrow keys when focus is trapped; visitors with cognitive impairments or low technical comprehension may only search for a control to use and not take any other actions, or just be confused when they don't know how they closed the modal. The presence of a close button increases user confidence that the action they are taking will do what they expect.

Yes, there should be a close button. You are correct that in the majority of scenarios it is not needed, and many users will not need it or use it. However, we are trying to cover the needs of all users, not just most users.

[artemiomorales]

@luisherranz @alexstine @joedolson Hey all, thanks so much for the additional clarification and discussion! We'll move forward with the visible close button as recommended 👍