Make WordPress Core

Opened 3 years ago

Last modified 3 years 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 3 years ago.
Added focus to image
45209.2.diff (462 bytes) - added by imokol 3 years ago.

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
3 years 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
3 years 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 3 years ago by Hitendra Chopda (previous) (diff)

#3 @Hitendra Chopda
3 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

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

3 years ago

#5 @afercia
3 years 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
3 years 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.

3 years ago

#8 @afercia
3 years 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
3 years ago

  • Keywords good-first-bug added

3 years ago

Added focus to image

#10 @themattroyal
3 years ago

  • Keywords has-patch added; needs-patch removed

3 years ago

#11 @imokol
3 years ago

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

#12 @Hitendra Chopda
3 years ago

@imokol Thanks for reply.

Note: See TracTickets for help on using tickets.