Page MenuHomePhabricator

[Bug] MultimediaViewer is not compatible with desktop night theme
Closed, ResolvedPublicBUG REPORT

Description

NOTE: Blocked on T354889. Initially detected while testing patchdemo

Steps to reproduce

  1. Visit a desktop page in night theme with image e.g. https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&vectornightmode=1
  2. Click image

Expected results

All elements appear in night theme without any color contrast issues

Actual results

See red boxes for color contrast issues

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

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

Screenshot 2024-04-29 at 4.09.47 PM.png (698×1 px, 166 KB)

Screenshot 2024-04-29 at 4.10.07 PM.png (1×1 px, 162 KB)

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

Environments observed

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

Event Timeline

Change #1027000 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Use Codex colors to fix dark mode

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

Change #1027000 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Use Codex colors to fix dark mode

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

Jdlrobson moved this task from Backlog to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 3) board.
Jdlrobson updated Other Assignee, added: simon04.

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

[mediawiki/extensions/MultimediaViewer@master] Fix Codex icons on progressive buttons in dark mode

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

Esanders subscribed.

...

Screenshot 2024-05-04 at 11.06.45 AM.png (852×2 px, 132 KB)

...

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MultimediaViewer/+/1027000 changed the background in light mode to grey, which jars with the tab selector, and doesn't match the designs posted on T340258:

image.png (346×512 px, 27 KB)

Edtadros subscribed.

Test Result - Beta

Status: ❌ Fail
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Visit a desktop page in night theme with image e.g. https://patchdemo.wmflabs.org/wikis/abfa33da2d/wiki/Dog?vectornightmode=1
Click image
Expected results
❌ AC1: All elements appear in night theme without any color contrast issues

screenshot 309.png (987×1 px, 973 KB)

screenshot 310.png (983×1 px, 1 MB)

screenshot 313.png (983×1 px, 1 MB)

screenshot 314.png (983×1 px, 1 MB)

screenshot 315.png (983×1 px, 1 MB)

There are still a few contrast issues
screenshot 311.png (983×1 px, 1 MB)

screenshot 312.png (983×1 px, 1 MB)

Just noticed that this ended up on production on Commons even with the bug that @Esanders found and what @Edtadros brought up. You can see it on any file, example here.

Change #1029665 had a related patch set uploaded (by Simon04; author: Simon04):

[mediawiki/extensions/MultimediaViewer@master] Fix dialog background color

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

Change #1029665 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Fix dialog background color

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

Jdlrobson updated the task description. (Show Details)

@Edtadros should be ready for testing again.

Test Result - Beta

Status: ❌ Fail
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Visit a desktop page in night theme with image e.g. https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&vectornightmode=1
Click image
Expected results
❌ AC1: All elements appear in night theme without any color contrast issues

screenshot 328.png (1×1 px, 961 KB)

This odd gradient "view more" bar doesn't show up unless you click the WCAG issue. I'm not sure what to make of it since it's not visible otherwise.
screenshot 329.png (1×1 px, 956 KB)

The remaining color contrast issues look like templates specific to that page and are not in our control so we can call this a pass.

ovasileva subscribed.

Looks good, resolving.