Make WordPress Core

Opened 5 years ago

Closed 16 months ago

Last modified 16 months ago

#45209 closed enhancement (fixed)

Add new plugin GUI Image click issue

Reported by: hitendra-chopda's profile Hitendra Chopda Owned by: audrasjb's profile audrasjb
Milestone: 6.0 Priority: normal
Severity: normal Version: 5.1
Component: Plugins Keywords: good-first-bug has-patch commit
Focuses: ui, accessibility, css, 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 (3)

45209.diff (331 bytes) - added by themattroyal 5 years ago.
Added focus to image
45209.2.diff (462 bytes) - added by imokol 5 years ago.
plugin-image-focus-chrome.png (39.8 KB) - added by sabernhardt 16 months ago.
focus outline on image, using 45209.diff

Download all attachments as: .zip

Change History (26)

#1 @SergeyBiryukov
5 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
5 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.

Thanks.

Last edited 5 years ago by Hitendra Chopda (previous) (diff)

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


5 years ago

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

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


5 years ago

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

  • Keywords good-first-bug added

@themattroyal
5 years ago

Added focus to image

#10 @themattroyal
5 years ago

  • Keywords has-patch added; needs-patch removed

@imokol
5 years ago

#11 @imokol
5 years ago

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

#12 @Hitendra Chopda
5 years ago

@imokol Thanks for reply.

This ticket was mentioned in Slack in #core by sergey. View the logs.


17 months ago

#14 @SergeyBiryukov
17 months ago

  • Milestone changed from Future Release to 6.0

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


16 months ago

#16 @ryokuhi
16 months ago

  • Keywords needs-testing added

@sabernhardt
16 months ago

focus outline on image, using 45209.diff

#17 @sabernhardt
16 months ago

  • Focuses css added
  • Keywords commit added; needs-testing removed

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)

#18 @audrasjb
16 months ago

  • Owner set to audrasjb
  • Status changed from reopened to reviewing

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

#20 @audrasjb
16 months ago

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

#21 @audrasjb
16 months ago

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

#22 @audrasjb
16 months ago

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

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.

Note: See TracTickets for help on using tickets.