Dark blue closing cross over the black background in plugins page

[dperonne]

When you consult the details of a plugin by clicking on "show details", the closing cross of the popup is dark blue. It's hard to see it over the black background.
Possible to change to a light color?

[dperonne]

Screenshot of the closing cross

[sabernhardt]

Hi and thanks for the report!

The hover/focus blue does not have enough contrast against the dark background.

.plugin-details-modal #TB_closeWindowButton:hover,
.plugin-details-modal #TB_closeWindowButton:focus {
  color: #135e96;
  outline: none;
  box-shadow: none;
}

One option is replacing the color change with a light outline and editing the button width (the icon would still be the light gray):

.plugin-details-modal #TB_closeWindowButton {
  padding-right: 3px;
  width: 32px;
  right: -34px;
}
.plugin-details-modal #TB_closeWindowButton:hover,
.plugin-details-modal #TB_closeWindowButton:focus {
  outline: 2px solid #f0f0f1;
  outline-offset: -2px;
}

Updated the close button color of the plugin details popup.

Trac ticket: 56604

[mukesh27]

@sabernhardt Are you preferring to change CSS for close button position or it can be simple to update the color of the icon as per the PR ​https://github.com/WordPress/wordpress-develop/pull/3376?

[sabernhardt]

Thanks for the patch!

I do not think changing the button's position is necessary, unless we replace the entire Thickbox dialog with a new one similar to the Theme details (not on this ticket).

The light gray icon color in the patch does not work as a hover/focus style because that matches the un-focused style. Using ​Blue 10 (#9ec2e6) would stand out better than the dark blue, but the focus style ideally would be more obvious than only changing the color.

[afercia]

Additionally: the focus style can't be based only on color change. It needs to use a shape that can be perceived regardless of color perception impairments.

[viralsampat]

I have added patch and resolved this issue.

[viralsampat]

After added patch, Now its look like attached file.

[joedolson]

Adds non-color focus marker

[joedolson]

Updated patch to add a focus state indicator that's not purely dependent on color. Patch adds a 2px white outline on focus/hover.

This was missing from the PR by @jeawhanlee, and improves on the 1px border added in the patch by @viralsampat. Using outline avoids a shift of position.

[joedolson]

Screenshot after 56604.2

[joedolson]

Per comment #7, uses #9ec2e6 as the focus/hover color.

[joedolson]

Added a patch that uses #9ec236, per @sabernhardt's comment above. Not sure I care for it from a design perspective; could use a 2nd opinion.

[joedolson]

Screen shot with blue 10 focus state

[sabernhardt]

I don't like the light blue for both the X and the outline. The light gray is fine for both, though then we could simply remove any text color from hover/focus (the button already is light gray) and only add the outline styles.

[joedolson]

Agreed. Thanks!

[joedolson]

Simplified patch in light gray

[joedolson]

In 55107:

Plugins: Add visible focus on plugin modal close button.

Change the focus and hover state of the plugin modal close button to use #f0f0f1 with visible outline to be visible against modal overlay.

Props dperonne, viralsampat, jeawhanlee, mukesh27, sabernhardt, joedolson.
Fixes #56604.

[SergeyBiryukov]

#57969 was marked as a duplicate.