WordPress.org

Make WordPress Core

Opened 13 months ago

Last modified 12 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:
PR Number:

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 13 months ago.
Added focus to image
45209.2.diff (462 bytes) - added by imokol 13 months ago.

Download all attachments as: .zip

Change History (14)

#1 @SergeyBiryukov
13 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
13 months ago

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

Thanks for reply.

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

Thanks.

Version 0, edited 13 months ago by Hitendra Chopda (next)

#3 @Hitendra Chopda
13 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.


13 months ago

#5 @afercia
13 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:

http://cldup.com/wY24zbKAJh.png

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
13 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.


13 months ago

#8 @afercia
13 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
13 months ago

  • Keywords good-first-bug added

@themattroyal
13 months ago

Added focus to image

#10 @themattroyal
13 months ago

  • Keywords has-patch added; needs-patch removed

@imokol
13 months ago

#11 @imokol
13 months ago

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

#12 @Hitendra Chopda
12 months ago

@imokol Thanks for reply.

Note: See TracTickets for help on using tickets.