Page MenuHomePhabricator
Create Task
Maniphest T363778

[Regression] Red links not compatible with night theme in both mobile and desktop
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To
ovasileva
Authored By
Jdlrobson
Mon, Apr 29, 11:13 PM
Tags
Referenced Files
F53969523: screenshot 357.png
Mon, May 20, 4:35 PM
F53969543: screenshot 358.png
Mon, May 20, 4:35 PM
F53969495: screenshot 356.png
Mon, May 20, 4:35 PM
F51964342: screenshot 323.png
Fri, May 10, 10:49 PM
F51964305: screenshot 322.png
Fri, May 10, 10:49 PM
F51963248: screenshot 321.png
Fri, May 10, 10:49 PM
F51962873: screenshot 319.png
Fri, May 10, 10:49 PM
F49351600: Screenshot 2024-04-29 at 4.12.31 PM.png
Mon, Apr 29, 11:13 PM
Subscribers
Aklapper
CCiufo-WMF
Daimona
DTorsani-WMF
Edtadros
egardner
Jdlrobson
View All 10 Subscribers

Description

Steps to reproduce

  1. Test the following types of pages
    1. A page without a talk page: https://en.m.wikipedia.beta.wmflabs.org/wiki/Conflict-title-0.5721056271356895-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n?minervanightmode=1
    2. A page with red links in article: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181
    3. A page with red link inside message box at top of article: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1
  2. Check for color contrast issues

Expected results

No accessibility issues with red links

Actual results

Screenshot 2024-04-29 at 4.12.31 PM.png (1×2 px, 1 MB)

Environments observed

  • Browser version:
  • OS version:
  • Device model:
  • Device language:

Check any additional observations

Stack trace

Console output





Derived Requirement



Ensure that red links are compatible with night mode on both mobile and desktop, maintaining proper visibility and contrast.



BDD



Feature: Red Links Compatibility with Night Mode

  Scenario: Red links visibility on a page without a talk page in night mode
    Given the user is viewing a page without a talk page in night mode
    When the user checks the color of red links
    Then the red links should be visible and meet accessibility contrast standards

  Scenario: Red links visibility in an article in night mode
    Given the user is viewing an article with red links in night mode
    When the user checks the color of red links
    Then the red links should be visible and meet accessibility contrast standards

  Scenario: Red links visibility in a message box in night mode
    Given the user is viewing a page with red links inside a message box at the top of the article in night mode
    When the user checks the color of red links
    Then the red links should be visible and meet accessibility contrast standards





Test Steps



Test Case 1: Red Links Visibility on a Page Without a Talk Page in Night Mode



    

  1. Open the specific URL provided for testing: https://en.m.wikipedia.beta.wmflabs.org/wiki/Conflict-title-0.5721056271356895-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n?minervanightmode=1.
    2. 

  2. Ensure night mode is enabled.
    3. 

  3. AC1: Confirm that the red links are visible and meet accessibility contrast standards.
    4. 




Test Case 2: Red Links Visibility in an Article in Night Mode



    

  1. Open the specific URL provided for testing: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1.
    2. 

  2. Ensure night mode is enabled.
    3. 

  3. AC2: Confirm that the red links in the article are visible and meet accessibility contrast standards.
    4. 




Test Case 3: Red Links Visibility in a Message Box in Night Mode



    

  1. Open the specific URL provided for testing: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1.
    2. 

  2. Ensure night mode is enabled.
    3. 

  3. AC3: Confirm that the red links inside the message box at the top of the article are visible and meet accessibility contrast standards.
    4. 






QA Results - Beta





ACStatusDetails


1✅T363778#9813139


2✅T363778#9813139


3✅T363778#9813139


Details
SubjectRepoBranchLines +/-
Temporarily define color-link-new in Minerva like in Vectormediawiki/skins/MinervaNeuemaster+6 -0
Fix red link color in dark modemediawiki/skins/Vectormaster+9 -5
Customize query in gerrit
Related Objects
Event Timeline
There are a very large number of changes, so older changes are hidden. Show Older Changes
Restricted Application added a subscriber: Aklapper.  ·  View Herald TranscriptMon, Apr 29, 11:13 PM
ovasileva triaged this task as High priority.Tue, Apr 30, 5:41 PM
ovasileva added a parent task: T363814: Release dark mode as a beta feature on desktop (May 15th) .
Jdlrobson renamed this task from [Bug] Red links not compatible with night theme to [Bug] Red links not compatible with night theme in both mobile and desktop.Tue, Apr 30, 11:08 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson mentioned this in T360845: Minerva should use Codex night mode palette mixin: Links inside Codex message box are inaccessible.
Jdlrobson added a project: Design-System-Team.Tue, Apr 30, 11:51 PM
Jdlrobson added a project: Regression.
This is a regression from  T360845. It looks like previously we were using #E45D52 in night mode for color-link-red but that token does not exist in Codex. I have asked in Slack for clarity around what to do here.
Jdlrobson renamed this task from [Bug] Red links not compatible with night theme in both mobile and desktop to [Regression] Red links not compatible with night theme in both mobile and desktop.Tue, Apr 30, 11:53 PM
Jdlrobson added a project: Wikimedia-Hackathon-2024.Tue, Apr 30, 11:55 PM
Jdlrobson mentioned this in T362727: Remove wgMinervaApplyKnownTemplateHacks code..Wed, May 1, 2:26 AM
egardner mentioned this in T363887: Codex component tokens should only reference decision tokens, not option tokens.Wed, May 1, 2:45 AM
ovasileva subscribed.Wed, May 1, 8:42 AM
ovasileva edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 2); removed Web-Team-Backlog (FY2023-24 Q4 Sprint 3).Wed, May 1, 8:46 AM
DTorsani-WMF mentioned this in T363911: Fix red link tokens for dark mode.Wed, May 1, 1:59 PM
DTorsani-WMF subscribed.
I am working on fixing this as a part of T363911: Fix red link tokens for dark mode.
Jdlrobson changed the task status from Open to Stalled.Wed, May 1, 2:50 PM
Jdlrobson moved this task from Backlog to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q4 Sprint 2) board.
Jdlrobson moved this task from Backlog to Hacking project: Dark mode on the Wikimedia-Hackathon-2024 board.Wed, May 1, 3:25 PM
CCiufo-WMF moved this task from Inbox to Following on the Design-System-Team board.Wed, May 1, 8:52 PM
DTorsani-WMF added a comment.Thu, May 2, 12:06 AM
This patch which fixes this issue has been merged and will be a part of the next Codex release.
Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 3); removed Web-Team-Backlog (FY2023-24 Q4 Sprint 2).Thu, May 2, 2:20 AM
Moving to sprint 3 since this should be testable Tuesday 7th.
Jdlrobson moved this task from Backlog to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Thu, May 2, 2:21 AM
CCiufo-WMF subscribed.Thu, May 2, 2:38 PM


In T363778#9762686, @Jdlrobson wrote:


Moving to sprint 3 since this should be testable Tuesday 7th.





Just a note the next Codex release is scheduled for Tuesday, May 14th.
ovasileva moved this task from Blocked on Others to Backlog on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Thu, May 2, 3:34 PM
ovasileva moved this task from Backlog to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Thu, May 2, 5:42 PM
Jdlrobson moved this task from QA to Backlog on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Sun, May 5, 1:40 PM
ovasileva changed the task status from Stalled to Open.Mon, May 6, 5:23 PM
Estimating a temporary fix and unstalling
ovasileva set the point value for this task to 1.Mon, May 6, 5:24 PM
ovasileva moved this task from Backlog to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Mon, May 6, 6:41 PM
gerritbot added a comment.Mon, May 6, 6:57 PM
Change #1028564 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):



[mediawiki/skins/Vector@master] Fix red link color in dark mode



https://gerrit.wikimedia.org/r/1028564
gerritbot added a project: Patch-For-Review.Mon, May 6, 6:57 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Mon, May 6, 6:57 PM
SToyofuku-WMF assigned this task to Jdrewniak.Tue, May 7, 6:13 PM
Jdrewniak reassigned this task from Jdrewniak to Edtadros.Wed, May 8, 2:34 PM
Jdrewniak moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
Jdrewniak subscribed.
gerritbot added a comment.Wed, May 8, 2:53 PM
Change #1028564 merged by jenkins-bot:



[mediawiki/skins/Vector@master] Fix red link color in dark mode



https://gerrit.wikimedia.org/r/1028564
ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.5; 2024-05-14).Wed, May 8, 3:00 PM
Maintenance_bot removed a project: Patch-For-Review.Wed, May 8, 3:31 PM
Edtadros reassigned this task from Edtadros to SToyofuku-WMF.Fri, May 10, 10:49 PM
Edtadros moved this task from QA to Needs More Work on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) 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



Test the following types of pages. Check for color contrast issues

No accessibility issues with red links

❌ AC1:  A page without a talk page: https://en.m.wikipedia.beta.wmflabs.org/wiki/Conflict-title-0.5721056271356895-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n?minervanightmode=1


screenshot 319.png (999×957 px, 147 KB)


❓ AC2: A page with red links in article: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181


screenshot 321.png (992×958 px, 424 KB)


I also tried dark mode which did fail.  I wasn't sure why we are testing contrast on light mode in this step.


screenshot 322.png (993×945 px, 356 KB)


❌ AC3: A page with red link inside message box at top of article: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1


screenshot 323.png (1×954 px, 409 KB)
SToyofuku-WMF removed SToyofuku-WMF as the assignee of this task.Fri, May 10, 10:59 PM
SToyofuku-WMF subscribed.
Jdlrobson assigned this task to DTorsani-WMF.Sun, May 12, 2:58 PM
Jdlrobson moved this task from Needs More Work to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
@DTorsani-WMF should there be special casing for the red links in the message boxes? I'm not sure if the remaining issue flagged by @Edtadros above relates to an issue with the Codex palette CdxMessage component or on our side? There seems to be an issue in both night and light theme...
DTorsani-WMF added a comment.Mon, May 13, 1:34 PM
@Jdlrobson It looks like this patch which fixes the issue with red link color tokens is set to be included in the next Codex release, scheduled to happen tomorrow.
Jdlrobson removed a parent task: T363814: Release dark mode as a beta feature on desktop (May 15th) .Tue, May 14, 3:02 PM
Jdlrobson added a comment.Tue, May 14, 6:13 PM
The new Codex release should go out tomorrow (Wednesday) and we'll move this back to QA then.
Daimona subscribed.Wed, May 15, 10:04 PM
Edtadros mentioned this in T363372: Verify 1.43.0-wmf.5 deployment.Wed, May 15, 10:52 PM
Jdlrobson changed the task status from Open to Stalled.Thu, May 16, 10:04 PM
Jdlrobson added a subscriber: egardner.
This is not working correctly. Discussed in #talk-to-design-system-team and @egardner will create a follow up task. I'm stalling this one in mean time.
egardner mentioned this in T365207: Tokens: Ensure that component tokens preserve references to CSS variables on output.Thu, May 16, 10:17 PM
egardner added a comment.Thu, May 16, 10:20 PM
I've filed T365207 to represent the upstream issue in Codex. We may need to build in some custom logic into our design tokens tool (Style Dictionary) to get the correct behavior here. I'll start working on this tomorrow.



In the mean time, as a work-around you can set color-link-red manually to the appropriate color after you call the Codex dark mode mixin in Minerva (Vector appears to already to this). Once T365207 is completed, you should be able to remove these lines.
GMikesell-WMF mentioned this in T363373: Verify 1.43.0-wmf.4 deployment.Fri, May 17, 3:58 AM
gerritbot added a comment.Fri, May 17, 4:53 PM
Change #1032837 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):



[mediawiki/skins/MinervaNeue@master] Temporarily define color-link-new in Minerva like in Vector



https://gerrit.wikimedia.org/r/1032837
gerritbot added a project: Patch-For-Review.Fri, May 17, 4:53 PM
Jdlrobson reassigned this task from DTorsani-WMF to Jdrewniak.Fri, May 17, 4:53 PM
Jdlrobson moved this task from Blocked on Others to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
Jan: Let's apply a temporary fix here so we're not blocked on Codex updates.
Jdlrobson changed the task status from Stalled to Open.Fri, May 17, 4:53 PM
gerritbot added a comment.Fri, May 17, 5:43 PM
Change #1032837 merged by jenkins-bot:



[mediawiki/skins/MinervaNeue@master] Temporarily define color-link-new in Minerva like in Vector



https://gerrit.wikimedia.org/r/1032837
Jdlrobson reassigned this task from Jdrewniak to Edtadros.Fri, May 17, 5:45 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
ReleaseTaggerBot edited projects, added MW-1.43-notes (1.43.0-wmf.6; 2024-05-21); removed MW-1.43-notes (1.43.0-wmf.5; 2024-05-14).Fri, May 17, 6:00 PM
Maintenance_bot removed a project: Patch-For-Review.Fri, May 17, 6:31 PM
Edtadros updated the task description. (Show Details)Mon, May 20, 4:31 PM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.Mon, May 20, 4:35 PM
Test Result - Beta



Status: ✅ PASS  

Environment: beta  

OS: macOS Sonoma  

Browser: Chrome  

Device: MBS  

Emulated Device: NA



Test Artifact(s):



Test Steps



Test Case 1: Red Links Visibility on a Page Without a Talk Page in Night Mode



    

  1. Open the specific URL provided for testing: https://en.m.wikipedia.beta.wmflabs.org/wiki/Conflict-title-0.5721056271356895-I%C3%B1t%C3%ABrn%C3%A2ti%C3%B4n%C3%A0liz%C3%A6ti%C3%B8n?minervanightmode=1.
    2. 

  2. Ensure night mode is enabled.
    3. 

  3. ✅ AC1 Confirm that the red links are visible and meet accessibility contrast standards.
    4. 




screenshot 356.png (985×1 px, 273 KB)


Test Case 2: Red Links Visibility in an Article in Night Mode



    

  1. Open the specific URL provided for testing: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181.
    2. 

  2. Ensure night mode is enabled.
    3. 

  3. ✅ AC2 Confirm that the red links in the article are visible and meet accessibility contrast standards.
    4. 




screenshot 358.png (985×1 px, 562 KB)


Test Case 3: Red Links Visibility in a Message Box in Night Mode



    

  1. Open the specific URL provided for testing: https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Hooded_skunk&oldid=585181&minervanightmode=1.
    2. 

  2. Ensure night mode is enabled.
    3. 

  3. ✅ AC3 Confirm that the red links inside the message box at the top of the article are visible and meet accessibility contrast standards.
    4. 




screenshot 357.png (985×1 px, 563 KB)
Edtadros updated the task description. (Show Details)Mon, May 20, 4:36 PM
Edtadros removed Edtadros as the assignee of this task.Mon, May 20, 4:47 PM
Edtadros updated the task description. (Show Details)
ovasileva closed this task as Resolved.Tue, May 21, 3:55 PM
ovasileva claimed this task.
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