Make WordPress Core

Opened 21 months ago

Closed 17 months ago

Last modified 15 months ago

#56604 closed defect (bug) (fixed)

Dark blue closing cross over the black background in plugins page

Reported by: dperonne's profile dperonne Owned by: joedolson's profile joedolson
Milestone: 6.2 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: good-first-bug has-patch commit
Focuses: ui, accessibility, css, administration Cc:

Description

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?

Attachments (8)

dark-blue-closing-cross.png (2.2 KB) - added by dperonne 21 months ago.
Screenshot of the closing cross
56604.diff (787 bytes) - added by viralsampat 19 months ago.
I have added patch and resolved this issue.
0yXnCQIhVCkUYDXTO7f7NVWV5Gb1pVxHTWkJAPNP.jpeg (314.3 KB) - added by viralsampat 19 months ago.
After added patch, Now its look like attached file.
56604.2.diff (1.3 KB) - added by joedolson 17 months ago.
Adds non-color focus marker
Screenshot_20230120_105540.png (308.6 KB) - added by joedolson 17 months ago.
Screenshot after 56604.2
56604.3.diff (687 bytes) - added by joedolson 17 months ago.
Per comment #7, uses #9ec2e6 as the focus/hover color.
Screenshot_20230120_112022.png (297.0 KB) - added by joedolson 17 months ago.
Screen shot with blue 10 focus state
55604.4.diff (668 bytes) - added by joedolson 17 months ago.
Simplified patch in light gray

Download all attachments as: .zip

Change History (27)

@dperonne
21 months ago

Screenshot of the closing cross

#1 @sabernhardt
21 months ago

  • Focuses accessibility css administration added
  • Severity changed from trivial to normal
  • Type changed from enhancement to defect (bug)
  • Version trunk deleted

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;
}

#2 @sabernhardt
21 months ago

  • Keywords needs-patch added

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


21 months ago

#4 @joedolson
21 months ago

  • Keywords good-first-bug added
  • Milestone changed from Awaiting Review to 6.2

This ticket was mentioned in PR #3376 on WordPress/wordpress-develop by jeawhanlee.


21 months ago
#5

  • Keywords has-patch added; needs-patch removed

Updated the close button color of the plugin details popup.

Trac ticket: 56604

#6 @mukesh27
21 months ago

@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?

#7 @sabernhardt
21 months ago

  • Keywords changes-requested added

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.

Last edited 21 months ago by sabernhardt (previous) (diff)

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


21 months ago

#9 @afercia
20 months ago

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
19 months ago

I have added patch and resolved this issue.

@viralsampat
19 months ago

After added patch, Now its look like attached file.

#10 @joedolson
18 months ago

  • Owner set to joedolson
  • Status changed from new to accepted

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


17 months ago

#12 @ryokuhi
17 months ago

  • Keywords needs-testing added

@joedolson
17 months ago

Adds non-color focus marker

#13 @joedolson
17 months ago

  • Keywords commit added; changes-requested removed

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.

#14 @joedolson
17 months ago

  • Keywords needs-testing removed

@joedolson
17 months ago

Screenshot after 56604.2

@joedolson
17 months ago

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

#15 @joedolson
17 months ago

  • Keywords 2nd-opinion added; commit removed

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
17 months ago

Screen shot with blue 10 focus state

#16 @sabernhardt
17 months ago

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.

#17 @joedolson
17 months ago

  • Keywords commit added; 2nd-opinion removed

Agreed. Thanks!

@joedolson
17 months ago

Simplified patch in light gray

#18 @joedolson
17 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#19 @SergeyBiryukov
15 months ago

#57969 was marked as a duplicate.

Note: See TracTickets for help on using tickets.