Page MenuHomePhabricator

[wmf.10] Homepage - Mentorship module: on hover mentor username displays cross line
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce :

  • on a wiki with Mentorship enabled, go to Special:Homepage - e.g. cswiki Special:Homrpsge
  • Hover over a user name in Mentorship module. A user name displays a cross over line

The screenshot below is from FF 100

Screen Shot 2022-05-05 at 5.20.02 PM.png (399×571 px, 47 KB)

Note:

  • Chrome 98 doesn't display the issue for Vector 2022 and Legacy Vector
  • FF 100 displays the issue for both - Vector 2022 and Legacy Vector.

Event Timeline

Etonkovidova renamed this task from [wmf.10] Homepage - Mentorhip module: mentor username displayed crossed when hovered over to [wmf.10] Homepage - Mentorhip module: mentor username display a crossed over on hover over.May 6 2022, 12:22 AM
Etonkovidova renamed this task from [wmf.10] Homepage - Mentorhip module: mentor username display a crossed over on hover over to [wmf.10] Homepage - Mentorship module: on hover mentor username displays cross line.May 6 2022, 12:28 AM

That's weird -- thanks for raising this up. I can confirm this behavior.

kostajh triaged this task as Medium priority.May 12 2022, 8:59 AM

The user name has vertical-align: bottom but it's inside <a> which gets an underline upon hover. In Firefox, the underline remains at the same level regardless of the bottom alignment.

Change 792667 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Mentorship: Use flex-end instead of vertical-align: bottom

https://gerrit.wikimedia.org/r/792667

Screen Shot 2022-05-17 at 9.50.34 AM.png (186×386 px, 14 KB)

Not in the scope of this task but some how related, maybe @Urbanecm_WMF can help to clarify:

Is the text-decoration under the Mentor name when hovering the icon a desired feature?

Screenshot 2022-05-18 at 10.19.56.png (570×830 px, 55 KB)

Also I see the link has a yellow/orange color when in the "active" state. Is this meeting design requirements?

Screenshot 2022-05-18 at 10.22.36.png (570×830 px, 51 KB)

The color does not follow WCAG standards. Is this a known issue?

Screenshot 2022-05-18 at 10.25.33.png (1×3 px, 524 KB)

Change 792667 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentorship: Use flex-end instead of vertical-align: bottom

https://gerrit.wikimedia.org/r/792667

Tagging @RHo as well re: mentor username link states

Screen Shot 2022-05-17 at 9.50.34 AM.png (186×386 px, 14 KB)

Not in the scope of this task but some how related, maybe @Urbanecm_WMF can help to clarify:

Is the text-decoration under the Mentor name when hovering the icon a desired feature?

Screenshot 2022-05-18 at 10.19.56.png (570×830 px, 55 KB)

Also I see the link has a yellow/orange color when in the "active" state. Is this meeting design requirements?

Screenshot 2022-05-18 at 10.22.36.png (570×830 px, 51 KB)

The color does not follow WCAG standards. Is this a known issue?

Screenshot 2022-05-18 at 10.25.33.png (1×3 px, 524 KB)

That's not good. We are using the existing styles from OOUI and Vector/Minerva though as it is expected to be conformant, and I see this is an issue with links on many content pages not just the homepage. For example here's the active state on the Special:Preferences screen:

image.png (1×2 px, 388 KB)

Seems like something that we should maybe flag with either the Web team...?

Checked in wmf.13- the issue is fixed.