Page MenuHomePhabricator

FlaggedRevisions not compatible with night mode
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

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

What happens?:

Color contrast violation

Screenshot 2024-03-15 at 1.54.11 PM.png (342×1 px, 220 KB)

What should have happened instead?:
No color contrast violation.

This rule is the problem:

.flaggedrevs_basic, .flaggedrevs_preview {
    color: #72777d;
    font-size: 0.8em;
}

This color is equivalent to @color-disabled
Perhaps this should use notice colors defined in https://doc.wikimedia.org/codex/latest/design-tokens/color.html since it is a type of notice?

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

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

QA Results - Beta

ACStatusDetails
1T360231#9792819

QA Results - PROD

ACStatusDetails
1Issue being resolved in T365089 per T360231#9830683

Event Timeline

This is a Minerva-specific skin style (introduced in 83dccd47636841d9c75f55f6b8a9cbe7de934650), so it should be fairly easy to convert it to LESS and use design tokens? On the other hand, it will only fix Minerva; other skins are even more awful from a design viewpoint (e.g. the same message on Vector 2022, with non-standard background color #eaf3ff and non-standard text color #000 – although, at least, this overrides both the background and text color, so it will be just way too bright in night mode rather than unreadable).

Jdlrobson changed the task status from Open to Stalled.Apr 3 2024, 11:53 AM
Jdlrobson added a subscriber: Ladsgroup.

We can add a skinStyle for Minerva but since we'll also want to later get this working for Vector 2022, personally I think we should do this properly in the MediaWiki-extensions-FlaggedRevs extension and that requires a talk with @Ladsgroup to get permission :-)

The skin style is already there (in the FlaggedRevs repo), the notice already looks quite different on Minerva than on other skins. So fixing the color contrast in that skin style wouldn’t worsen the consistency situation between skins (granted, it wouldn’t improve it either).

Jdlrobson changed the task status from Stalled to Open.Apr 17 2024, 3:54 PM

I chatted to @Ladsgroup and he is happy to support code review here.

bwang removed bwang as the assignee of this task.May 13 2024, 4:37 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
bwang subscribed.

Change #1031024 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/FlaggedRevs@master] Replace flaggedrev variables with CSS variables

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

Change #1031024 merged by jenkins-bot:

[mediawiki/extensions/FlaggedRevs@master] Replace flaggedrev variables with CSS variables

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

I suggested a possible follow up to this on Gerrit - the new dark theme has a few color contrast issues that can be resolved by removing the background.

Change #1031048 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/FlaggedRevs@master] Update .flaggedrev_preview background color to fix dark mode contrast issues

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

Change #1031048 merged by jenkins-bot:

[mediawiki/extensions/FlaggedRevs@master] Improve night mode theme for FlaggedRevisions

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

Test Steps

Visit https://ka.m.wikipedia.org/wiki/?minervanightmode=1 when there are pending changes
Check WCAG color contrast on page
✅ AC1: No color contrast violation.
I wasn't sure if this is the right element, but I found this page on beta with pending changes.

screenshot 327.png (1×1 px, 297 KB)

screenshot 326.png (1×1 px, 317 KB)

Jdlrobson added a subscriber: ovasileva.

Change #1032863 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/extensions/FlaggedRevs@master] Fix incorrect color in preview

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

Change #1032863 merged by jenkins-bot:

[mediawiki/extensions/FlaggedRevs@master] Fix incorrect color in preview

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

Do we need this to go through QA one more time?

ovasileva claimed this task.

Discussed in planning, this one is ready to go

@Jdlrobson Would this count as an issue or is this fine?

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.5
Browser: Chrome 125
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Visit https://en.wikipedia.org/w/index.php?title=Willy_Wonka_%26_the_Chocolate_Factory&stable=0&redirect=no&vectornightmode=1 when there are pending changes
Check WCAG color contrast on page
✅ AC1: No color contrast violation.
UPDATE: This issue is being resolved in [T365089] per T360231#9830683

2024-05-24_09-58-42.png (1×3 px, 913 KB)

Yes. The issue you are flagging is the QA for T365089.