Make WordPress Core

Opened 17 months ago

Last modified 16 months ago

#45209 reopened enhancement

Add new plugin GUI Image click issue

Reported by: Hitendra Chopda Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.1
Component: Plugins Keywords: good-first-bug has-patch
Focuses: ui, accessibility, administration Cc:

Description (last modified by SergeyBiryukov)

Once I click on Plugin image it will auto click on Plugin title and comes border around it.

Screen: https://ibb.co/cYozTA

I made some JS for solution see below:

jQuery('.plugin-card-top img').click(function(){ jQuery(this).parent().find('a').click();});
jQuery(".plugin-card-top img").hover(function(){
    jQuery(this).css("cursor", "pointer");

Attachments (2)

45209.diff (331 bytes) - added by themattroyal 17 months ago.
Added focus to image
45209.2.diff (462 bytes) - added by imokol 17 months ago.

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
17 months ago

  • Description modified (diff)
  • Focuses ui accessibility administration added
  • Keywords 2nd-opinion close added; has-patch removed

Hi @hitendra-chopda, welcome to WordPress Trac! Thanks for the report.

I think that's intentional, the border shows the current focus for accessibility reasons.

#2 @Hitendra Chopda
17 months ago

  • Resolution set to invalid
  • Status changed from new to closed

Thanks for reply.

@SergeyBiryukov Yes that correct, But once click on Plugin Icon at that time it will affect to plugin title link that logically flow not true.


Last edited 17 months ago by Hitendra Chopda (previous) (diff)

#3 @Hitendra Chopda
17 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #design by hitendra-chopda. View the logs.

17 months ago

#5 @afercia
17 months ago

@Hitendra Chopda thanks for your report. That's intentional. Rather than an "auto click", this happens because both the plugin image and the plugin name are within the same link. It's a best practice to reduce the amount of links pointing to the same resource, see https://www.w3.org/TR/WCAG20-TECHS/H2.html

WordPress already uses this pattern in a few places, for example in the Media Library (list mode: wp-admin/upload.php?mode=list) and the Credits page (wp-admin/credits.php). See in the screenshot below the focus style when clicking on a media image:


For consistency, I'd rather suggest to add a focus style to the image when the parent link gets clicked. See https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/common.css?rev=43309&marks=265-272#L264

#6 @Hitendra Chopda
17 months ago

@afercia thanks for the update.
It is possible to remove link border issue once click on image.
Thanks for explain me about the best practice to reduce the amount of links pointing to the same resource.

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

17 months ago

#8 @afercia
17 months ago

  • Keywords needs-patch added; 2nd-opinion close removed
  • Milestone changed from Awaiting Review to Future Release
  • Type changed from defect (bug) to enhancement

Discussed during today's accessibility meeting and we'd recommend to add a focus style to the image too, as a visual enhancement.

#9 @afercia
17 months ago

  • Keywords good-first-bug added

17 months ago

Added focus to image

#10 @themattroyal
17 months ago

  • Keywords has-patch added; needs-patch removed

17 months ago

#11 @imokol
17 months ago

@Hitendra Chopda and @afercia I've added a focus style to the image for visual enhancement

#12 @Hitendra Chopda
16 months ago

@imokol Thanks for reply.

Note: See TracTickets for help on using tickets.