Reference drawer: Visited links have insufficient contrast in Minerva in light theme
Open, MediumPublic
Actions

Assigned To

None

Authored By

	Pcoombe
	Feb 20 2024, 2:50 PM

Description

Steps to replicate the issue (include links if applicable):

Visit https://jdlrobson.com
Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Reference_drawer_craziness?minervanightmode=0
Click [1]
Check color contrast of reference link

For production:

Visit https://www.manchestereveningnews.co.uk/whats-on/music-nightlife-news/manchester-co-op-live-arena-24339535
Visit https://en.m.wikipedia.org/wiki/Co-op_Live?minervanightmode=0
Switch theme into light mode if you aren't already
Click [5]
Check color contrast of reference link

What happens?:
Visited links in MinervaNeue have purple color #6b4ba1. However when one appears in the pop-up reference drawer with black #000 background, there is only a contrast ratio of 3.14:1. This is insufficient to meet the WCAG AA standard (4.5:1)

en.m.wikipedia.org_wiki_Co-op_Live(iPhone 12 Pro).png (2×1 px, 351 KB)

What should have happened instead?:

The links in the reference drawer should always use the night theme.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Related Objects

Mentioned In: T367413: Minerva reference drawer should have a light background
T366515: [VISUAL CHANGE] Visited links are not accessible in dark mode
Mentioned Here: T367413: Minerva reference drawer should have a light background
T366048: Sheet: Add Sheet component to Codex
T129054: Math formulas can be unreadable in references in mobile view
T366515: [VISUAL CHANGE] Visited links are not accessible in dark mode

Event Timeline

Pcoombe created this task.Feb 20 2024, 2:50 PM

Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald TranscriptFeb 20 2024, 2:50 PM

Jdlrobson added a project: Web-Team-Backlog (FY2023-24 Q3 Sprint 4).Feb 20 2024, 5:10 PM

@JScherer-WMF @ovasileva I suggested medium priority for this one since it's a long term existing bug.

In T357988#9565835, @Jdlrobson wrote:

@JScherer-WMF @ovasileva I suggested medium priority for this one since it's a long term existing bug.

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 5); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 4).Feb 26 2024, 7:04 PM

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q3 Sprint 5).Mar 11 2024, 7:08 PM

ovasileva moved this task from Incoming to Groomed on the Web-Team-Backlog board.Mar 21 2024, 4:14 PM

Jdlrobson updated the task description. (Show Details)Mar 21 2024, 4:16 PM

Discussed in grooming and decided to keep the toast in night mode for both day and night modes

Taking my name off of this because we decided on a design direction: Pop up drawer will always use night mode theme.

@JScherer-WMF I see a few issues with the existing references drawer design that I wanted to note that are likely out of scope for this particular ticket:

It bleeds into the rest of the article in night mode making it hard to distinguish the drawer from the content beneath.
The icon is faded to unreadable state

Screenshot 2024-04-01 at 2.24.22 PM.png (1×758 px, 200 KB)

For this particular issue with link I see two changes:

Links in the reference drawer seem to use a hardcoded color for non-visited state applying to .drawer.references-drawer a rather than the variable - we should switch this to use design token.
We could put the "skin-theme-clientpref-night" class on the parent element for the references drawer to force it to use the night mode theme and adjust our existing styles to apply to .skin-theme-clientpref-night rather than html.skin-theme-clientpref-night.

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q3 Sprint 6).Apr 3 2024, 2:04 AM

JScherer-WMF mentioned this in T366515: [VISUAL CHANGE] Visited links are not accessible in dark mode.Mon, Jun 3, 6:03 PM

JScherer-WMF edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 5); removed Web-Team-Backlog.

JScherer-WMF renamed this task from Visited links have insufficient contrast in mobile pop-up reference drawer to Visited links have insufficient contrast in Minerva.Mon, Jun 3, 6:05 PM

JScherer-WMF raised the priority of this task from Medium to High.

I can't replicate this @JScherer-WMF ! I tried to create some replication steps but they are passing - is it possible you have a gadget enabled or some kind of custom styles?

Jdlrobson renamed this task from Visited links have insufficient contrast in Minerva to Reference drawer: Visited links have insufficient contrast in Minerva.Mon, Jun 3, 8:39 PM

Jdlrobson assigned this task to JScherer-WMF.Mon, Jun 3, 8:49 PM

This comment was removed by Jdlrobson.

I think this is the same bug as T366515 where the visited link colours are wrong.

Here are the dark mode link colours:
progressive: #6D8AF2
progressive-hover: #AFB6E9
progressive-active: #C2D1F0
progressive-focus: #3366CC
destructive: #FF4242
destructive-hover: #EF8174
destructive-active: #F8A397
visited: #977DBD
destructive-visited: #B97876
disabled: #72777D

Here are the repro steps I just used to get this:

Screenshot 2024-06-05 at 4.26.17 PM.png (1×1 px, 531 KB)

Screenshot 2024-06-05 at 4.28.22 PM.png (1×1 px, 307 KB)

Go to: https://en.m.wikipedia.org/wiki/Pound_sterling
tap Citation [8]
Click out to the "Currency composition of the official..." link.
Navigate back to https://en.m.wikipedia.org/wiki/Pound_sterling
Click on Citation [8] again.
Drawer uses dark purple instead of lighter purple for visited links.

JScherer-WMF moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 5) board.Wed, Jun 5, 10:31 PM

Justin can no longer reproduce this (chatted to him on Slack). It's possible Justin was getting some cached styles.

This still happens but only in light mode: visited link color is #6b4ba1 and reference drawer background is #000 which is not sufficient contrast. It's fine in Minerva dark mode since that has a lighter visited link color. Note that I filed this task before dark mode was even available which is why I didn't specify.

Personally I think the best long-term solution would be to have the drawer background follow the site background as discussed in T129054, ideally using a new Codex component as talked about in this Slack thread.

Pcoombe updated the task description. (Show Details)Fri, Jun 7, 5:34 PM

Oh, I figured there must be a task for the new component but "Sheet" was the one word I didn't think to search for :) T366048: Sheet: Add Sheet component to Codex

Ah got it! This is likely where the disconnect was. @Jdrewniak it seems like we might need something like notheme for dark mode that forces the reference drawer to use the dark mode color palette?

Jdlrobson renamed this task from Reference drawer: Visited links have insufficient contrast in Minerva to Reference drawer: Visited links have insufficient contrast in Minerva in light theme.Fri, Jun 7, 6:30 PM

Jdlrobson lowered the priority of this task from High to Medium.

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 6); removed Web-Team-Backlog (FY2023-24 Q4 Sprint 5).Mon, Jun 10, 5:46 PM

We should make the references drawer white per T367413.

Jdlrobson moved this task from Needs analysis to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Thu, Jun 13, 5:21 PM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q4 Sprint 6).Tue, Jun 18, 8:27 AM

	F54955685: Screenshot 2024-06-05 at 4.28.22 PM.png
	Wed, Jun 5, 10:30 PM

	F54955659: Screenshot 2024-06-05 at 4.26.17 PM.png
	Wed, Jun 5, 10:30 PM

	F44001892: Screenshot 2024-04-01 at 2.24.22 PM.png
	Apr 1 2024, 6:31 AM

	F42002470: en.m.wikipedia.org_wiki_Co-op_Live(iPhone 12 Pro).png
	Feb 20 2024, 2:50 PM

Reference drawer: Visited links have insufficient contrast in Minerva in light themeOpen, MediumPublicActions

Description

Related Objects

Event Timeline

Reference drawer: Visited links have insufficient contrast in Minerva in light theme
Open, MediumPublic
Actions