WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 3 days ago

Last modified 3 days ago

#48582 closed defect (bug) (fixed)

Better to have some hover effects on credits list

Reported by: ixkaito Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility, administration Cc:
PR Number:

Description

On the new WordPress 5.3 Credits page, there's no hover effect on the Core Contributors to WordPress list. There was before.

Attachments (11)

48582.diff (407 bytes) - added by ixkaito 4 weeks ago.
48582.2.diff (321 bytes) - added by mukesh27 4 weeks ago.
Updated patch.
6e0911e92ee58bdde4e57a9e5449494f.gif (3.7 MB) - added by audrasjb 4 weeks ago.
48582.2.diff
48582.nav-tab-active-color.png (22.5 KB) - added by SergeyBiryukov 3 weeks ago.
48582.disappearing-link.png (26.7 KB) - added by SergeyBiryukov 3 weeks ago.
Capture d’écran 2019-11-24 à 14.26.40.png (95.3 KB) - added by audrasjb 3 weeks ago.
Color proposal (it fits with the darker background color used in about pages)
810cce8dfbe42324dad6ffa7eaf4938a.gif (7.7 MB) - added by audrasjb 3 weeks ago.
credit list links
2164c3137ee8ec89459d22f5937a624e.gif (1.1 MB) - added by audrasjb 3 weeks ago.
Darker background
48582.3.diff (656 bytes) - added by audrasjb 3 weeks ago.
New patch
screencapture-localhost-8888-testing-features-test3-wp-admin-freedoms-php-2019-12-03-21_57_23.png (390.9 KB) - added by audrasjb 9 days ago.
Freedoms screen
screencapture-localhost-8888-testing-features-test3-wp-admin-privacy-php-2019-12-03-21_58_12.png (169.6 KB) - added by audrasjb 9 days ago.
Privacy screen

Change History (35)

@ixkaito
4 weeks ago

#1 @audrasjb
4 weeks ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to audrasjb
  • Status changed from new to accepted
  • Version 5.3 deleted

Hi @ixkaito and thank your for your ticket,

I totally agree with you. Adding this ticket to milestone 5.3.1 so we can address it as soon as possible.
Will test your patch asap.

Thanks,
Jb

#2 @mukesh27
4 weeks ago

@audrasjb I checked the latest version 5.3 and found that when we hover over the name it show underline under the name using below CSS.

https://github.com/WordPress/WordPress/blob/5.3-branch/wp-admin/css/about.css#L596

.about__section .wp-person .web:hover {
	text-decoration: underline;
}

#3 @ixkaito
4 weeks ago

@mukesh27 Thanks. "Noteworthy Contributors" have that effect, but other contributors below them don't have.

#4 @mukesh27
4 weeks ago

@ixkaito got it.

+1 from my side.

#5 @melchoyce
4 weeks ago

Good catch. Looks like the "Get involved in WordPress" link at the top of the credits page needs the same treatment.

@mukesh27
4 weeks ago

Updated patch.

#6 @mukesh27
4 weeks ago

Patch 48582.2.diff will be removed from the underline from all the links.

#7 @ixkaito
4 weeks ago

@mukesh27 Thanks. Tested. Also works on other About pages e.g. "What's New". Looks fine.

#8 @audrasjb
4 weeks ago

  • Keywords has-screenshots commit added; needs-testing removed
  • Type changed from enhancement to defect (bug)

Thanks for the patch.

I tested 48582.2.diff and it fixes the issue for every links in 5.3 "about" screens.

See animated screenshot above for the contributors list. It also fixes the "Get involved" link and the other links in about.php screen.

Looks good to go on my side. Adding commit keyword.
Also changing ticket type from Enhancement to Defect/Bug since it's an accessibility/usability issue.

Cheers,
Jb

#9 @SergeyBiryukov
3 weeks ago

Tested 48582.2.diff, works as expected here.

Just wondering if removing the underline would be the expected hover effect here.

Maybe something like this would be more consistent with .about__header-navigation .nav-tab-active styles?

.about__section a:hover {
	color: #BD3854;
	color: var(--accent-1);
}

See 48582.nav-tab-active-color.png.

@melchoyce, do you have a preference? :)

#10 follow-up: @audrasjb
3 weeks ago

@SergeyBiryukov I tried this at first, but it doesn't meet accessibility color contrasts requirements when this color is used on the "For developers" box in about.php (this box is using var(--subtle-background) background color).

#11 in reply to: ↑ 10 @SergeyBiryukov
3 weeks ago

Replying to audrasjb:

I tried this at first, but it doesn't meet accessibility color contrasts requirements when this color is used on the "For developers" box in about.php (this box is using var(--subtle-background) background color).

Thanks for the context! I guess it just looks weird to me when the link suddenly "disappears" on hover :)

This might seem OK for the credits list, but not so much for links in the middle of a sentence, where you can no longer tell which part of the sentence is linked: 48582.disappearing-link.png.

Maybe we could choose a color that would also work in the "For Developers" box?

It might be just me though, I have no objections proceeding with 48582.2.diff if it looks good to everyone else :)

Last edited 3 weeks ago by SergeyBiryukov (previous) (diff)

#12 @audrasjb
3 weeks ago

  • Keywords commit removed

Agree :-)
I'll try to add an alternative patch this afternoon, so wait a little before committing :D

@audrasjb
3 weeks ago

Color proposal (it fits with the darker background color used in about pages)

@audrasjb
3 weeks ago

credit list links

@audrasjb
3 weeks ago

Darker background

@audrasjb
3 weeks ago

New patch

#13 @audrasjb
3 weeks ago

  • Keywords needs-design-feedback added

In 48582.3.diff I tried a different approach:

  • adding a color (that passes WCAG criteria) to every links
  • adding underline in credit lists only on hover/focus since it's a list composed only with links

Adding needs-design-feedback keyword.
Pinging @melchoyce for feedback (as you already commented this ticket before)

Cheers,
Jb

#14 @mukesh27
2 weeks ago

@audrasjb Tested 48582.3.diff patch it is working fine.

Can we remove the hover color from below about section CSS because normal state and hover state links color are the same so it was not required to add hover color?

.about__section a:hover,
.about__section a:active,
.about__section a:focus {
    color: #5F1B29;
    text-decoration: none;
}

Replace to

.about__section a:hover,
.about__section a:active,
.about__section a:focus {
    text-decoration: none;
}

#15 @audrasjb
9 days ago

Thanks @mukesh27
I think we need it to avoid blue link on hover/focus state. Will try a new test tonight.

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


9 days ago

This ticket was mentioned in Slack in #design by audrasjb. View the logs.


9 days ago

#18 @melchoyce
9 days ago

48582.3.diff looks good to me! 🚢

Should we also apply that styling to Freedoms and Privacy?

#19 @audrasjb
9 days ago

Thank you @melchoyce !
Sorry I forgot to add screenshots for Freedom and Privacy pages. The same CSS styles applies as well.
Screenshots coming below.

#20 @melchoyce
9 days ago

Ah, I think those pages were cached or something, I'm seeing the right color now.

#21 @audrasjb
9 days ago

OMG… 🙈 please don't pay attention to the adminbar colors in the screenshot above, it's from my admin bar plugin…

#22 @audrasjb
9 days ago

  • Keywords commit added; needs-design-feedback removed

Adding commit keyword since the last patch was reviewed by the design team.

#23 @SergeyBiryukov
3 days ago

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

In 46852:

Help/About: Add a hover effect for links on About pages.

  • Add a color that passes WCAG color contrast criteria to every link.
  • Add an underline for links in credits list only on hover/focus.

Props audrasjb, ixkaito, mukesh27, melchoyce, SergeyBiryukov.
Fixes #48582.

#24 @SergeyBiryukov
3 days ago

In 46853:

Help/About: Add a hover effect for links on About pages.

  • Add a color that passes WCAG color contrast criteria to every link.
  • Add an underline for links in credits list only on hover/focus.

Props audrasjb, ixkaito, mukesh27, melchoyce, SergeyBiryukov.
Merges [46852] to the 5.3 branch.
Fixes #48582.

Note: See TracTickets for help on using tickets.