Page MenuHomePhabricator

Links are unreadable on main page in dark mode
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

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

What happens?:

Screenshot 2024-09-19 at 3.13.43 PM.png (1×2 px, 759 KB)

Links are unreadable

What should have happened instead?:

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

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

Derived Requirement

Ensure that links on the Faroese, Turkish, and Breton Wikipedia homepages are readable in both desktop and mobile dark mode.

BDD

Feature: Link readability on Wikipedia homepages in dark mode

Scenario: Ensure links are readable in dark mode on Wikipedia homepages for different languages (desktop and mobile)

Given the user is on the Faroese, Turkish, or Breton Wikipedia homepage
When the user switches to dark mode on either desktop or mobile
Then all links on the page should be clearly readable
Test Steps

Test Case 1: Ensure links on the Faroese Wikipedia homepage are readable in dark mode (desktop and mobile)

Open the Faroese Wikipedia homepage here.
Switch to dark mode in desktop mode.
✅❓❌⬜ AC1: Confirm that all links on the page are clearly readable, with appropriate contrast between the link text and the background.
Switch to dark mode in mobile view.
✅❓❌⬜ AC2: Confirm that all links are clearly readable on mobile.

Test Case 2: Ensure links on the Turkish Wikipedia homepage are readable in dark mode (desktop and mobile)

Open the Turkish Wikipedia homepage here.
Switch to dark mode in desktop mode.
✅❓❌⬜ AC3: Confirm that all links on the page are clearly readable, with appropriate contrast between the link text and the background.
Switch to dark mode in mobile view.
✅❓❌⬜ AC4: Confirm that all links are clearly readable on mobile.

Test Case 3: Ensure links on the Breton Wikipedia homepage are readable in dark mode (desktop and mobile)

Open the Breton Wikipedia homepage here.
Switch to dark mode in desktop mode.
✅❓❌⬜ AC5: Confirm that all links on the page are clearly readable, with appropriate contrast between the link text and the background.
Switch to dark mode in mobile view.
✅❓❌⬜ AC6: Confirm that all links are clearly readable on mobile.

QA Results - Faroese, Turkish, or Breton PROD

Event Timeline

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

[mediawiki/extensions/WikimediaMessages@master] Do not apply table styling rules to Main page

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

Change #1074258 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] Do not apply table styling rules to Main page

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

Jdlrobson triaged this task as High priority.

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

[mediawiki/extensions/WikimediaMessages@wmf/1.43.0-wmf.23] Do not apply table styling rules to Main page

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

GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF updated Other Assignee, added: Edtadros.
GMikesell-WMF added a subscriber: Edtadros.
Jdlrobson renamed this task from Links are unreadable on main page to Links are unreadable on main page in dark mode.Sep 23 2024, 5:24 PM
ovasileva set the point value for this task to 2.Sep 23 2024, 5:26 PM

Change #1074545 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@wmf/1.43.0-wmf.23] Do not apply table styling rules to Main page

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

Mentioned in SAL (#wikimedia-operations) [2024-09-23T21:10:14Z] <toyofuku@deploy1003> Started scap sync-world: Backport for [[gerrit:1074545|Do not apply table styling rules to Main page (T375245)]]

Mentioned in SAL (#wikimedia-operations) [2024-09-23T21:12:50Z] <toyofuku@deploy1003> jdlrobson, toyofuku: Backport for [[gerrit:1074545|Do not apply table styling rules to Main page (T375245)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-09-23T21:20:59Z] <toyofuku@deploy1003> Finished scap sync-world: Backport for [[gerrit:1074545|Do not apply table styling rules to Main page (T375245)]] (duration: 10m 44s)

Test Result - Faroese, Turkish, and Breton PROD

Status: ✅ PASS
Environment: Faroese, Turkish, and Breton PROD
OS: macOS Sonoma 14.6.1
Browser: Chrome 128
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://fo.wikipedia.org/wiki/Fors%C3%AD%C3%B0a?vectornightmode=1&minervanightmode=1
https://tr.wikipedia.org/wiki/Anasayfa?vectornightmode=1&minervanightmode=1
https://br.wikipedia.org/wiki/Degemer?vectornightmode=1&minervanightmode=1

Test Steps

Test Case 1: Ensure links on the Faroese Wikipedia homepage are readable in dark mode (desktop and mobile)

Open the Faroese Wikipedia homepage here.
Switch to dark mode in desktop mode.
✅AC1: Confirm that all links on the page are clearly readable, with appropriate contrast between the link text and the background.
Switch to dark mode in mobile view.

DesktopMobile
2024-09-23_15-22-55.png (671×3 px, 411 KB)
2024-09-23_15-22-37.png (665×3 px, 351 KB)

✅ AC2: Confirm that all links are clearly readable on mobile.

DesktopMobile
2024-09-23_15-12-04.mp4.gif (680×1 px, 1 MB)
2024-09-23_15-12-39.mp4.gif (906×1 px, 2 MB)

Test Case 2: Ensure links on the Turkish Wikipedia homepage are readable in dark mode (desktop and mobile)

Open the Turkish Wikipedia homepage here.
Switch to dark mode in desktop mode.
✅ AC3: Confirm that all links on the page are clearly readable, with appropriate contrast between the link text and the background.
Switch to dark mode in mobile view.

DesktopMobile
2024-09-23_15-23-22.png (520×3 px, 283 KB)
2024-09-23_15-23-09.png (580×3 px, 265 KB)

✅ AC4: Confirm that all links are clearly readable on mobile.

DesktopMobile
2024-09-23_15-10-52.mp4.gif (640×1 px, 1000 KB)
2024-09-23_15-11-27.mp4.gif (686×1 px, 1 MB)

Test Case 3: Ensure links on the Breton Wikipedia homepage are readable in dark mode (desktop and mobile)

Open the Breton Wikipedia homepage here.
Switch to dark mode in desktop mode.
✅ AC5: Confirm that all links on the page are clearly readable, with appropriate contrast between the link text and the background.
Switch to dark mode in mobile view.

DesktopMobile
2024-09-23_15-22-05.png (806×3 px, 579 KB)
2024-09-23_15-22-20.png (767×3 px, 471 KB)

✅ AC6: Confirm that all links are clearly readable on mobile.

DesktopMobile
2024-09-23_15-09-30.mp4.gif (910×1 px, 2 MB)
2024-09-23_15-10-20.mp4.gif (908×1 px, 2 MB)
GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF updated Other Assignee, removed: Edtadros.
GMikesell-WMF subscribed.

Looks good, resolving