Page MenuHomePhabricator
Create Task
Maniphest T360845

Minerva should use Codex night mode palette mixin: Links inside Codex message box are inaccessible
Open, HighPublic1 Estimated Story Points
Actions

Assigned To
Edtadros
Authored By
Jdlrobson
Mar 23 2024, 7:01 PM
Tags
Referenced Files
F49526822: screenshot 284.png
Tue, Apr 30, 10:47 PM
F49526637: screenshot 283.png
Tue, Apr 30, 10:47 PM
F49526558: screenshot 282.png
Tue, Apr 30, 10:47 PM
F46839882: Screenshot 2024-04-15 at 1.51.38 PM.png
Mon, Apr 15, 8:52 PM
F43157735: Screenshot 2024-03-23 at 12.00.29 PM.png
Mar 23 2024, 7:01 PM
F43157624: Screenshot 2024-03-23 at 11.57.48 AM.png
Mar 23 2024, 7:01 PM
F43157656: Screenshot 2024-03-23 at 11.58.26 AM.png
Mar 23 2024, 7:01 PM
F43157647: Screenshot 2024-03-23 at 11.58.12 AM.png
Mar 23 2024, 7:01 PM
Subscribers
Aklapper
bwang
CCiufo-WMF
DTorsani-WMF
Edtadros
egardner
Jdlrobson
Masumrezarock100

Description

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

Check color contrast on the following pages:

What happens?:

  • The red link is inaccessible in the first example
  • The blue links are inaccessible in the second example.

Screenshot 2024-03-23 at 11.58.12 AM.png (302×1 px, 87 KB)

What should have happened instead?:

The colors should be accessible e.g. meet AA color contrast guidelines.

Software version (skip for WMF-hosted wikis like Wikipedia):

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

Details

SubjectRepoBranchLines +/-
Complete transition to Codex color palettesmediawiki/skins/MinervaNeuemaster+16 -23
Use light theme colors for focus colorsmediawiki/skins/MinervaNeuemaster+0 -2
Remove tokens with same values in light thememediawiki/skins/MinervaNeuemaster+0 -2
Use tokens from Codexmediawiki/skins/MinervaNeuemaster+4 -32
Customize query in gerrit

Related Objects

Event Timeline

Jdlrobson created this task.Mar 23 2024, 7:01 PM
Restricted Application added a project: Design-System-Team. · View Herald TranscriptMar 23 2024, 7:01 PM
Restricted Application added subscribers: Masumrezarock100, Aklapper. · View Herald Transcript
CCiufo-WMF moved this task from Inbox to Up Next on the Design-System-Team board.Mar 26 2024, 7:11 PM
CCiufo-WMF added a project: Design.Mon, Apr 1, 4:21 PM
CCiufo-WMF added a project: Accessibility.
CCiufo-WMF changed the subtype of this task from "Bug Report" to "Task".Mon, Apr 1, 5:30 PM
Catrope assigned this task to DTorsani-WMF.Mon, Apr 1, 5:30 PM
Catrope moved this task from Up Next to DST-Sprint-20 (2024-04-01 to 2024-04-12) on the Design-System-Team board.
Catrope edited projects, added Design-System-Team (DST-Sprint-20 (2024-04-01 to 2024-04-12)); removed Design-System-Team.
DTorsani-WMF moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-20 (2024-04-01 to 2024-04-12)) board.Mon, Apr 1, 6:01 PM
DTorsani-WMF added a comment.EditedMon, Apr 1, 6:05 PM

We are updating the token values in Codex to fix this issue on the varying statuses of Messages. @Jdlrobson in case you are hard coding these values for now, here are the updated values for the backgrounds of the Messages in dark mode.

notice#202122
success#00261e
warning#301d00
error#421211

Let me know if there's anything else you need for this.

DTorsani-WMF added a comment.Mon, Apr 1, 6:22 PM

@Jdlrobson Is it possible for visited links or red links to be present in these Messages?

Jdlrobson added a comment.Mon, Apr 1, 9:57 PM
In T360845#9677165, @DTorsani-WMF wrote:

@Jdlrobson Is it possible for visited links or red links to be present in these Messages?

Yes. Please refer to the URLs in the description.

DTorsani-WMF added a comment.Tue, Apr 2, 2:43 PM

Apologies for missing that. I will provide new color values in the table above that will work for all types of links on the varying Message status backgrounds for dark mode. Please standby.

Jdlrobson added a comment.Tue, Apr 2, 3:10 PM
In T360845#9680548, @DTorsani-WMF wrote:

Apologies for missing that. I will provide new color values in the table above that will work for all types of links on the varying Message status backgrounds for dark mode. Please standby.

Note, the red links are also not accessible in the standard theme.

DTorsani-WMF added a comment.Tue, Apr 2, 3:16 PM

@Jdlrobson Thanks for that note. We are working on a broader color update that will be built into Codex. Also, the table above has been updated with colors that meet accessibility criteria.

DTorsani-WMF reassigned this task from DTorsani-WMF to Jdlrobson.Mon, Apr 15, 4:51 PM
DTorsani-WMF removed a project: Design-System-Team (DST-Sprint-20 (2024-04-01 to 2024-04-12)).
DTorsani-WMF subscribed.

Colors have also been updated in Codex tokens. Assigning back to @Jdlrobson and removing from the design system board.

Jdlrobson added a project: Design-System-Team.Mon, Apr 15, 8:52 PM

@DTorsani-WMF could you expand on exactly what's changed (it's not clear from your update)?
I am still seeing color contrast issues on links in:
https://test.m.wikipedia.org/w/index.php?title=Wage_unit&oldid=439372&minervanightmode=1

Screenshot 2024-04-15 at 1.51.38 PM.png (87×1 px, 28 KB)

DTorsani-WMF added a comment.Mon, Apr 15, 11:48 PM

I wasn't sure if you were hard coding these dark mode values still or using what is being built into Codex. I think there may be a patch with some updates on our end that has not been published yet, but that update addresses this issue.

Jdlrobson added a subscriber: CCiufo-WMF.Mon, Apr 15, 11:55 PM

The styles for the message box come from Codex, so these will need to be done inside the Codex library.

I think there may be a patch with some updates on our end that has not been published yet, but that update addresses this issue.

Okay that would make sense. @CCiufo-WMF any idea where that can be tracked?

CCiufo-WMF added a comment.Tue, Apr 16, 7:37 PM

@Jdlrobson the new colors Derek is referencing were added as part of T360341, which is set to be included in the Codex release going out today, so they are technically not there yet. The patch is https://gerrit.wikimedia.org/r/c/design/codex/+/1015983. Note that in order to increase the contrast, the colors that are changing are not the link colors but rather the background colors of the messages in dark mode.

CCiufo-WMF added a comment.Wed, Apr 17, 11:51 PM

The latest Codex release went out and includes the dark mode decision tokens. I think once the experimental build is folded into the main build as described in T354889#9720761 and Minerva + Vector use the tokens from Codex, this will be fixed.

CCiufo-WMF moved this task from Inbox to Triaging on the Design-System-Team board.Wed, Apr 17, 11:51 PM
Jdlrobson updated the task description. (Show Details)Thu, Apr 18, 7:57 PM
In T360845#9724812, @CCiufo-WMF wrote:

The latest Codex release went out and includes the dark mode decision tokens. I think once the experimental build is folded into the main build as described in T354889#9720761 and Minerva + Vector use the tokens from Codex, this will be fixed.

Minerva+Vector get these styles directly from Codex and they don't seem to be applying on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930&oldid=612901&minervanightmode=1 ?

CCiufo-WMF added a comment.Thu, Apr 18, 8:27 PM
In T360845#9728068, @Jdlrobson wrote:

Minerva+Vector get these styles directly from Codex and they don't seem to be applying on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930&oldid=612901&minervanightmode=1 ?

But aren't the color values for the dark palette currently defined at the skin level (only in Minerva too)? I thought that was the case until we're using the decision tokens just introduced in https://gerrit.wikimedia.org/r/c/design/codex/+/1015983. That's why @DTorsani-WMF was providing the hex values, to be added to the skin in the meantime. It feels like there's something we might not be understanding here.

Jdlrobson edited projects, added Web-Team-Backlog, MinervaNeue; removed Design-System-Team, Codex.Thu, Apr 18, 8:42 PM

Got it. I think we can take it from here.

Jdlrobson renamed this task from Links inside Codex message box are inaccessible to Minerva should use Codex night mode palette mixin: Links inside Codex message box are inaccessible.Thu, Apr 18, 8:43 PM
Jdlrobson triaged this task as High priority.
Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 2); removed Web-Team-Backlog.
gerritbot added a comment.Thu, Apr 18, 9:20 PM

Change #1021568 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Use tokens from Codex

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

gerritbot added a project: Patch-For-Review.Thu, Apr 18, 9:20 PM
CCiufo-WMF added a subscriber: egardner.Thu, Apr 18, 9:25 PM

@Jdlrobson just a note, since I saw you comment on it in the patch, some of the tokens were indeed intentionally left the same between light and dark mode. Worth having @egardner and @DTorsani-WMF review though.

Jdlrobson added a project: FY2023-24-WE 2.1 Typography and palette customizations.Thu, Apr 18, 9:32 PM
ovasileva set the point value for this task to 1.Tue, Apr 23, 5:20 PM
ovasileva moved this task from Backlog to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.
Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.Tue, Apr 23, 7:00 PM
Jdlrobson reassigned this task from Jdlrobson to bwang.Wed, Apr 24, 6:17 PM
Jdlrobson updated the task description. (Show Details)Thu, Apr 25, 6:35 PM
Jdlrobson updated the task description. (Show Details)Thu, Apr 25, 8:21 PM
bwang reassigned this task from bwang to Jdlrobson.Thu, Apr 25, 8:26 PM
bwang moved this task from Code Review to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.
bwang subscribed.
gerritbot added a comment.Thu, Apr 25, 8:50 PM

Change #1021568 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use tokens from Codex

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

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.3; 2024-04-30).Thu, Apr 25, 9:00 PM
gerritbot added a comment.Fri, Apr 26, 12:18 AM

Change #1024524 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Remove tokens with same values in light theme

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

gerritbot added a comment.Fri, Apr 26, 12:18 AM

Change #1024525 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Use light theme colors for focus colors

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.Mon, Apr 29, 9:10 PM
gerritbot added a comment.Mon, Apr 29, 9:11 PM

Change #1025468 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Complete transition to Codex color palettes

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

gerritbot added a comment.Mon, Apr 29, 9:21 PM

Change #1024524 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Remove tokens with same values in light theme

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

bwang claimed this task.Tue, Apr 30, 4:27 PM
gerritbot added a comment.Tue, Apr 30, 5:34 PM

Change #1024525 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Use light theme colors for focus colors

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

gerritbot added a comment.Tue, Apr 30, 5:35 PM

Change #1025468 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Complete transition to Codex color palettes

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

ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.4; 2024-05-07); removed MW-1.43-notes (1.43.0-wmf.3; 2024-04-30).Tue, Apr 30, 6:00 PM
Maintenance_bot removed a project: Patch-For-Review.Tue, Apr 30, 6:31 PM
Jdlrobson reassigned this task from bwang to Edtadros.Tue, Apr 30, 7:18 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.
Edtadros reassigned this task from Edtadros to bwang.Tue, Apr 30, 10:47 PM
Edtadros moved this task from QA to Needs More Work on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.
Edtadros subscribed.

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Check color contrast on the following pages:

https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930&oldid=612901&minervanightmode=1
https://en.m.wikivoyage.org/wiki/User%3AGacor314?safemode=1
https://test.m.wikipedia.org/w/index.php?title=Wage_unit&oldid=439372&minervanightmode=1
What happens?:

❌ AC1 The red links in Codex message box should meet AA color contrast guidelines
I used https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1 for the red link in the message box.

screenshot 282.png (640×1 px, 269 KB)

✅ AC2: The blue links in Codex message box should meet AA color contrast guidelines

screenshot 283.png (704×1 px, 137 KB)

❌ NOTE: While not in scope of the task, the gray link in the Codex message box does NOT meet AA color contrast guidelines

screenshot 284.png (519×1 px, 147 KB)

Jdlrobson closed this task as Resolved.Tue, Apr 30, 11:10 PM
Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.

Thanks as always!

In T360845#9759808, @Edtadros wrote:

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Check color contrast on the following pages:

https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930&oldid=612901&minervanightmode=1
https://en.m.wikivoyage.org/wiki/User%3AGacor314?safemode=1
https://test.m.wikipedia.org/w/index.php?title=Wage_unit&oldid=439372&minervanightmode=1
What happens?:

❌ AC1 The red links in Codex message box should meet AA color contrast guidelines
I used https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1 for the red link in the message box.

screenshot 282.png (640×1 px, 269 KB)

Captured in T363778. It's possible the Codex release today might fix this so let's try this again on Wednesday. If not we can move to sign off and state that this failed and will be dealt with in a follow up.

✅ AC2: The blue links in Codex message box should meet AA color contrast guidelines

screenshot 283.png (704×1 px, 137 KB)

❌ NOTE: While not in scope of the task, the gray link in the Codex message box does NOT meet AA color contrast guidelines

screenshot 284.png (519×1 px, 147 KB)

I created T363878 for this one.

Jdlrobson reopened this task as Open.Tue, Apr 30, 11:10 PM
Jdlrobson reassigned this task from bwang to Edtadros.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL