Better to have some hover effects on credits list

[ixkaito]

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

[audrasjb]

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

[mukesh27]

@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;
}

[ixkaito]

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

[mukesh27]

@ixkaito got it.

+1 from my side.

[melchoyce]

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

[mukesh27]

Updated patch.

[mukesh27]

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

[ixkaito]

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

[audrasjb]

48582.2.diff

[audrasjb]

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

[SergeyBiryukov]

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? :)

[audrasjb]

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

[SergeyBiryukov]

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 no 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 :)

[audrasjb]

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

[audrasjb]

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

[audrasjb]

credit list links

[audrasjb]

Darker background

[audrasjb]

New patch

[audrasjb]

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

[mukesh27]

@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;
}

[audrasjb]

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

[melchoyce]

48582.3.diff​ looks good to me! 🚢

Should we also apply that styling to Freedoms and Privacy?

[audrasjb]

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

[audrasjb]

Freedoms screen

[audrasjb]

Privacy screen

[melchoyce]

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

[audrasjb]

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

[audrasjb]

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

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.