Add new plugin GUI Image click issue

[Hitendra Chopda]

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

[SergeyBiryukov]

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.

[Hitendra Chopda]

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.

Thanks.

[afercia]

@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

[Hitendra Chopda]

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

[afercia]

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

[themattroyal]

Added focus to image

[themattroyal]

Added a patch: https://core.trac.wordpress.org/attachment/ticket/45209/45209.diff

Please review.

[imokol]

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

[Hitendra Chopda]

@imokol Thanks for reply.

[sabernhardt]

focus outline on image, using 45209.diff

[sabernhardt]

With 45209.diff​, the image has the same blue outline as the text part of the link.

Tested in 6.0-alpha-52772 with Windows 10 browsers (Chrome 98, Firefox 97, Edge 98, Opera 83, IE 11)

[audrasjb]

Removing commit keyword since the current patch needs to be refreshed against trunk.

Trac ticket: https://core.trac.wordpress.org/ticket/45209

[audrasjb]

Checks are passing and patch is refreshed. Marking for commit consideration.

[audrasjb]

I can confirm the issue is fixed by the proposed patch. Committing right now.

[audrasjb]

In 52790:

Plugins: Add focus style to plugin icon link in plugin cards.

This change adds a blue focus outline to the icon on plugin cards, for consistency with the text part of the link.

Props hitendra-chopda, SergeyBiryukov, afercia, themattroyal, imokol, sabernhardt, audrasjb.
Fixes #45209.

Committed in https://core.trac.wordpress.org/changeset/52790