Page MenuHomePhabricator
Create Task
Maniphest T358797

Autocorrect content which uses inline styles using background without color
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
Jdlrobson
Feb 29 2024, 6:38 PM
Tags
Referenced Files
F42845755: screenshot 94.png
Mar 20 2024, 1:31 PM
F42845531: screenshot 93.png
Mar 20 2024, 1:31 PM
F42845368: screenshot 92.png
Mar 20 2024, 1:31 PM
F42845292: screenshot 91.png
Mar 20 2024, 1:31 PM
F42764837: screenshot 64.png
Mar 19 2024, 8:18 PM
F42764833: screenshot 63.png
Mar 19 2024, 8:18 PM
F42764823: screenshot 62.png
Mar 19 2024, 8:18 PM
F42764805: screenshot 61.png
Mar 19 2024, 8:18 PM
View All 10 Files
Subscribers
Aklapper
Edtadros
Escargot_rouge
Jdlrobson
Mabualruz
Masumrezarock100
SToyofuku-WMF

Description

In T358240 we decided to use a CSS rule to make sure a color is always defined for templates. We deemed this would be less risky than a PHP based solution T358239 with no negative impact on performance.

The rule proposed would look like this and would only apply to night mode:

.mw-parser-output [style*="background"]{
   color: #333;
}

Steps to reproduce

Expected results

Example 1: Black text on yellow background.
Example 2: Purple text on yellow background.

Actual results

White text on yellow background.

Environments observed

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

Check any additional observations

Developer checklist

  • Make sure the new rule only applies to automatic and day mode
  • The rule should not be !important, any inline styles which are defined should overwrite it
  • The rule should apply to background: yellow, background:yellow; and background-color: yellow
  • Make sure to include an ADR for this decision. Link to https://phabricator.wikimedia.org/T358240#9591458 in the decision record so outsiders understand why we did this.

Additional QA

The scope of this rule is pretty large so might cause some issues. We'll want to do lots of exploratory testing to understand this more.

In production

QA Results - Beta

ACStatusDetails
1✅T358797#9643947
2✅T358797#9643947

QA Results - Prod

ACStatusDetails
1✅T358797#9643981
2❓T358797#9643981

Details

SubjectRepoBranchLines +/-
Use color-base instead of #333mediawiki/extensions/WikimediaMessagesmaster+4 -2
[POC] Attribute selector contrast issue fixmediawiki/skins/MinervaNeuemaster+13 -1
Fix color for inline styles with background color in night modemediawiki/skins/MinervaNeuemaster+49 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

Jdlrobson created this task.Feb 29 2024, 6:38 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 29 2024, 6:38 PM
Jdlrobson triaged this task as High priority.Feb 29 2024, 6:39 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)Feb 29 2024, 6:48 PM
Jdlrobson set the point value for this task to 2.
Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.
gerritbot added a comment.Feb 29 2024, 8:04 PM

Change 1006872 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/MinervaNeue@master] [POC] Attribute selector contrast issue fix

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

gerritbot added a project: Patch-For-Review.Feb 29 2024, 8:04 PM
Mabualruz subscribed.EditedFeb 29 2024, 8:06 PM

I added an old POC:

in final patch it has to be don in the hacks.less and make sure to have the .mw-parser-output class as parent

Jdlrobson updated the task description. (Show Details)Mar 1 2024, 1:04 AM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptMar 1 2024, 1:04 AM
Jdlrobson mentioned this in T358239: Automatic Correction of Template and Inline Styles.Mar 1 2024, 1:05 AM
Jdlrobson updated the task description. (Show Details)Mar 1 2024, 1:14 AM
Escargot_rouge subscribed.Mar 1 2024, 3:28 PM
Jdlrobson renamed this task from [placeholder] Autocorrect content which uses inline styles using background without color to Autocorrect content which uses inline styles using background without color.Mar 1 2024, 6:01 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson mentioned this in T358240: [Spike 4hours] Performance Impact Assessment for Night Mode Style Correction.Mar 1 2024, 6:04 PM
Izno mentioned this in T358078: Community discussion about hacks.less.Mar 2 2024, 10:54 PM
ovasileva added a parent task: T359152: Deploy initial version of night mode to pilot wikis on the mobile website for testing.Mar 6 2024, 4:38 PM
ovasileva added a project: FY2023-24-WE 2.1 Typography and palette customizations.Mar 7 2024, 3:15 PM
Jdlrobson updated the task description. (Show Details)Mar 7 2024, 7:49 PM
Jdlrobson mentioned this in T357453: WCAG Color Contrast Violations in Infobox on Minerva Skin Night Mode.
Jdlrobson moved this task from Backlog to Night mode (mobile) on the FY2023-24-WE 2.1 Typography and palette customizations board.Mar 8 2024, 12:10 AM
Jdlrobson updated the task description. (Show Details)Mar 8 2024, 4:24 PM
SToyofuku-WMF claimed this task.Mar 11 2024, 6:55 PM
SToyofuku-WMF moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.
gerritbot added a comment.Mar 11 2024, 10:14 PM

Change 1010330 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/skins/MinervaNeue@master] Fix color for inline styles with background color in night mode

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

SToyofuku-WMF moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.Mar 11 2024, 11:08 PM
gerritbot added a comment.Mar 11 2024, 11:31 PM

Change 1010330 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fix color for inline styles with background color in night mode

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

SToyofuku-WMF updated the task description. (Show Details)Mar 11 2024, 11:33 PM
SToyofuku-WMF reassigned this task from SToyofuku-WMF to Edtadros.Mar 11 2024, 11:52 PM
SToyofuku-WMF moved this task from Code Review to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.
SToyofuku-WMF subscribed.
ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.22; 2024-03-12).Mar 12 2024, 1:00 AM
gerritbot added a comment.Mar 18 2024, 5:42 AM

Change 1006872 abandoned by Mabualruz:

[mediawiki/skins/MinervaNeue@master] [POC] Attribute selector contrast issue fix

Reason:

This was done in 1010330

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

Maintenance_bot removed a project: Patch-For-Review.Mar 18 2024, 6:30 AM
Jdlrobson lowered the priority of this task from High to Medium.Mar 18 2024, 5:18 PM
Edtadros removed Edtadros as the assignee of this task.Mar 19 2024, 8:08 PM
Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.
Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/T35879?minervanightmode=1 or https://en.m.wikipedia.org/w/index.php?title=User:Jdlrobson/sandbox&oldid=1211134141&minervanightmode=1
Expected results
✅ AC1: Example 1: Black text on yellow background.
✅ AC2: Example 2: Purple text on yellow background.

screenshot 59.png (506×1 px, 73 KB)

Edtadros added a comment.Mar 19 2024, 8:18 PM

Test Result - Prod

Status: ❓ Need more Info
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/T35879?minervanightmode=1 or https://en.m.wikipedia.org/w/index.php?title=User:Jdlrobson/sandbox&oldid=1211134141&minervanightmode=1
Expected results
✅ AC1: Example 1: Black text on yellow background.
❓ AC2: Example 2: Purple text on yellow background.
@Jdlrobson, The pages with a ❓ below don't necessarily have a yellow background. Unclear if this is a pass or not.

screenshot 60.png (674×1 px, 96 KB)

✅ "Queen of the Ptolemaic Kingdom" in infobox on https://en.m.wikipedia.org/wiki/Cleopatra?minervanightmode=1

screenshot 61.png (674×1 px, 392 KB)

❓ "Screenshot" in infobox on https://en.m.wikipedia.org/wiki/Facebook?minervanightmode=1
There is no yellow background.

screenshot 62.png (674×1 px, 305 KB)

❓ Infobox on https://dag.m.wikipedia.org/wiki/Paris?minervanightmode=1
There is no yellow background.

screenshot 63.png (674×1 px, 297 KB)

❓ Infobox on https://da.m.wikipedia.org/wiki/Paris?minervanightmode=1
There is no yellow background.

screenshot 64.png (674×1 px, 344 KB)

Edtadros updated the task description. (Show Details)Mar 19 2024, 8:19 PM
Jdlrobson added a comment.Mar 19 2024, 10:15 PM

@Edtadros sorry yellow background only applied to first example. In the other test cases we are looking for color contrast issues and checking there are none.

Jdlrobson assigned this task to Edtadros.Mar 19 2024, 10:15 PM
Jdlrobson moved this task from Ready for Signoff to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.
Edtadros removed Edtadros as the assignee of this task.Mar 20 2024, 1:31 PM
Edtadros moved this task from QA to Needs More Work on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.

Test Result - Prod

Status: ❌ Fail
Environment: enwiki, dagwiki, dawiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/T35879?minervanightmode=1 or https://en.m.wikipedia.org/w/index.php?title=User:Jdlrobson/sandbox&oldid=1211134141&minervanightmode=1
Expected results
✅ AC1: Example 1: Black text on yellow background.
✅ AC2: Example 2: Purple text on yellow background.

screenshot 60.png (674×1 px, 96 KB)

❌ AC3: No color contrast issues on the elements below:

❌ "Queen of the Ptolemaic Kingdom" in infobox on https://en.m.wikipedia.org/wiki/Cleopatra?minervanightmode=1

screenshot 91.png (674×1 px, 320 KB)

✅ "Screenshot" in infobox on https://en.m.wikipedia.org/wiki/Facebook?minervanightmode=1

screenshot 92.png (674×1 px, 360 KB)

❌ Infobox on https://dag.m.wikipedia.org/wiki/Paris?minervanightmode=1
The text on the map is the only contrast issue in the infobox. I checked in day mode and the contrast issue is not there.

screenshot 93.png (674×1 px, 140 KB)

❌ Infobox on https://da.m.wikipedia.org/wiki/Paris?minervanightmode=1

screenshot 94.png (674×1 px, 435 KB)

SToyofuku-WMF added a comment.Mar 20 2024, 6:28 PM

Ooh interesting point - @Jdlrobson did we consider the link color adding contrast issues if we preserve the background color here? Or is the issue that we should be stripping it

Jdlrobson added a comment.Mar 20 2024, 8:51 PM

❌ "Queen of the Ptolemaic Kingdom" in infobox on https://en.m.wikipedia.org/wiki/Cleopatra?minervanightmode=1

Fixed on wiki.

❌ Infobox on https://dag.m.wikipedia.org/wiki/Paris?minervanightmode=1
The text on the map is the only contrast issue in the infobox. I checked in day mode and the contrast issue is not there.

This can be a pass. The map is coming from the Kartographer extension and isn't essential for the article.

❌ Infobox on https://da.m.wikipedia.org/wiki/Paris?minervanightmode=1

I can no longer replicate this.. I think the infobox may have been vandalised?

Jdlrobson moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 5) board.Mar 20 2024, 8:52 PM
Jdlrobson assigned this task to ovasileva.Mar 22 2024, 5:45 PM
ovasileva closed this task as Resolved.Mar 25 2024, 11:24 AM
In T358797#9647542, @Jdlrobson wrote:

❌ "Queen of the Ptolemaic Kingdom" in infobox on https://en.m.wikipedia.org/wiki/Cleopatra?minervanightmode=1

Fixed on wiki.

❌ Infobox on https://dag.m.wikipedia.org/wiki/Paris?minervanightmode=1
The text on the map is the only contrast issue in the infobox. I checked in day mode and the contrast issue is not there.

This can be a pass. The map is coming from the Kartographer extension and isn't essential for the article.

❌ Infobox on https://da.m.wikipedia.org/wiki/Paris?minervanightmode=1

I can no longer replicate this.. I think the infobox may have been vandalised?

Ok, this looks good. Resolving.

Edtadros added a project: Verified.Mar 26 2024, 9:49 PM
Edtadros mentioned this in T359678: Verify 1.42.0-wmf.22 deployment.Mar 26 2024, 9:55 PM
Jdlrobson added a comment.Apr 1 2024, 12:47 AM

This can be a pass. The map is coming from the Kartographer extension and isn't essential for the article.

Just a note this is now fixed as part of T359082.

gerritbot added a comment.Wed, Apr 24, 5:41 PM

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

[mediawiki/extensions/WikimediaMessages@master] Use color-base instead of #333

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

gerritbot added a project: Patch-For-Review.Wed, Apr 24, 5:41 PM
gerritbot added a comment.Wed, Apr 24, 8:18 PM

Change #1023927 merged by jenkins-bot:

[mediawiki/extensions/WikimediaMessages@master] Use color-base instead of #333

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

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.3; 2024-04-30).Wed, Apr 24, 9:00 PM
Maintenance_bot removed a project: Patch-For-Review.Fri, Apr 26, 6:55 PM
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