Page MenuHomePhabricator

Enable portal pages in night theme
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

Portal pages have issues with color contrast e.g. https://en.wikipedia.org/wiki/Portal:Arizona
But we probably should enable them, so editors can be motivated to fix them:

Screenshot 2024-05-31 at 9.45.12 AM.png (1×2 px, 719 KB)
.

User story

As a user I want all my pages in dark mode.

Communication criteria - does this need an announcement or discussion?

Should be communicated via user-notice or dark mode release notice.

Derived Requirement

Ensure that portal pages (e.g., Portal) are fully compatible with dark mode by addressing color contrast issues and enabling dark mode for all portal pages, allowing editors to fix any color contrast issues.

BDD

Feature: Enable Dark Mode for Portal Pages with Color Contrast Fixes

Scenario: Enable dark mode on portal pages with color contrast issues

Given the user is on a portal page (e.g., Portal:Arizona)
And dark mode is enabled in the user's settings
When the portal page is viewed
Then the page should display in dark mode
And all text should meet minimum color contrast requirements
Test Steps

Test Case 1: Verify Dark Mode on Portal Pages with Color Contrast Issues

Enable dark mode in your settings.
Navigate to Portal
or another portal page.
✅❓❌⬜ AC1: Confirm the page is displayed in dark mode.
✅❓❌⬜ AC2: Confirm all text meets minimum color contrast requirements.

QA Results - Beta

ACStatusDetails
1T366380#10145508
2T366380#10145508

QA Results - PROD

ACStatusDetails
1T366380#10145519
2T366380#10145519 per T366380#10145547

Event Timeline

Jdlrobson triaged this task as Medium priority.May 31 2024, 4:49 PM

Per standup let me know when you want to deploy this one!

Note that portals have a very low amount of visitors and maintainers, at least on nlwiki. Personally I don't see the effort of fixing 20 years of unmaintained styling myself, it's too much work for minimum impact.

ovasileva changed the task status from Open to Stalled.Jul 2 2024, 1:31 PM

Potentially we should do some QA on portals first before enabling.

Note: We could probably add some portal namespace specific rules for this page like we did with the main page but not planned for initial release.

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

[operations/mediawiki-config@master] Enable the dark mode in Portal namespace

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

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

[mediawiki/extensions/WikimediaMessages@master] Add Portal namespace color stripping

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

Change #1070207 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] Add Portal namespace color stripping

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

Jdlrobson changed the task status from Stalled to Open.Sep 6 2024, 9:10 PM

We've added some styles that will disable colors on portal pages. This means they'll just work in dark mode without any editor intervention. For projects where colors in portals are still important these colors can be updated gradually and then the style pack can be disabled per instructions on https://www.mediawiki.org/wiki/Extension:WikimediaMessages#Disabling_styles

After checking with Justin, I consider deploying to portal pages unblocked since it won't create work for editors unless they want it to.

(This cannot be verified in production until the backport has happened)

Jdlrobson added a subscriber: ovasileva.

Change #1063763 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable the dark mode in Portal namespace

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

Mentioned in SAL (#wikimedia-operations) [2024-09-12T20:34:19Z] <cjming@deploy1003> Started scap sync-world: Backport for [[gerrit:1063763|Enable the dark mode in Portal namespace (T366380)]]

Mentioned in SAL (#wikimedia-operations) [2024-09-12T20:36:20Z] <cjming@deploy1003> ebrahim, cjming: Backport for [[gerrit:1063763|Enable the dark mode in Portal namespace (T366380)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-09-12T20:43:16Z] <cjming@deploy1003> Finished scap sync-world: Backport for [[gerrit:1063763|Enable the dark mode in Portal namespace (T366380)]] (duration: 08m 57s)

@Jdlrobson @Edtadros Can you please review the issue below when you have a chance? Thanks!

Status: ❌ FAIL
Environment: Beta
OS: macOS Sonoma 14.6.1
Browser: Chrome 128
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Dark Mode on Portal Pages with Color Contrast Issues

Enable dark mode in your settings.
Navigate to Portal
or another portal page.
❌ AC1: Confirm the page is displayed in dark mode.
Music note image is dark

2024-09-13_12-40-54.mp4.gif (632×1 px, 2 MB)

❌ AC2: Confirm all text meets minimum color contrast requirements.
See AC1, white banner

@Jdlrobson @Edtadros Can you please review the contrast issues below and let me know what you think? Thanks!

UPDATE: Pass per T366380#10145547

Status: ✅ Pass per T366380#10145547
Environment: PROD
OS: macOS Sonoma 14.6.1
Browser: Chrome 128
Device: MBA
Emulated Device: NA

Test Artifact(s):

https://en.wikipedia.org/wiki/Portal:Arizona

Test Steps

Test Case 1: Verify Dark Mode on Portal Pages with Color Contrast Issues

Enable dark mode in your settings.
Navigate to Portal
or another portal page.
✅ AC1: Confirm the page is displayed in dark mode.

2024-09-13_12-47-35.mp4.gif (598×1 px, 3 MB)

✅ AC2: Confirm all text meets minimum color contrast requirements.

UPDATE: Pass per T366380#10145547 out of scope
Numerous Contrast errors

Talk PagePortal Topics
2024-09-13_12-48-07.mp4.gif (594×1 px, 2 MB)
2024-09-13_12-48-48.mp4.gif (552×1 px, 2 MB)

Regarding AC2 talk pages and images are out of scope for this change! So this is a pass!