Page MenuHomePhabricator

The language selector uses light theme but is not legible in dark mode
Closed, ResolvedPublic2 Estimated Story Points

Description

Sorry if it does have a ticket already.

Here is how it looks like:

grafik.png (695×1 px, 159 KB)

screenshot 399.png (1×1 px, 628 KB)

How to fix

Adding notheme class to all dialogs should take care of this in the quickest possible way.

QA

Requirement

Ensure the language selector in dark mode is legible by applying the notheme class to all dialogs. Verify this implementation on the specified production page.

BDD

Feature: Legible Language Selector in Dark Mode

  Scenario: Ensure the language selector is legible in dark mode
    Given the language selector uses the `notheme` class
    When the user views the language selector in dark mode
    Then the language selector should be legible
    And the dialog should apply the `notheme` class

Test Steps

Test Case 1: Verify Legible Language Selector in Dark Mode

  1. Enable dark mode in the Vector 2022 skin.
  2. Navigate to this production page.
  3. Verify the language selector.
  4. AC1: Confirm that the language selector is legible in dark mode.
  5. AC2: Confirm that the dialog applies the notheme class.
  6. AC3: Repeat tests in T363780#9844963

QA Results - PROD

ACStatusDetails
1T365990#9894257
2T365990#9894257
3T365990#9894257 per T367590

Event Timeline

Jdlrobson renamed this task from The language selector is not switched to dark mode to The language selector is not fully switched to dark mode.Jun 3 2024, 5:12 PM

Change #1038892 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/UniversalLanguageSelector@master] Add notheme to dialog

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

Test wiki created on Patch demo by KSarabia-WMF using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/0a668b1093/w

Test wiki on Patch demo by KSarabia-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/0a668b1093/w/

Jdlrobson renamed this task from The language selector is not fully switched to dark mode to The language selector uses light theme but is not legible in dark mode.Jun 5 2024, 6:27 PM

Change #1038892 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Add notheme to dialog

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

Test Steps

Test Case 1: Verify Legible Language Selector in Dark Mode

  1. Enable dark mode in the Vector 2022 skin.
  2. Navigate to this production page.
  3. Verify the language selector.
  4. AC1: Confirm that the language selector is legible in dark mode.

screenshot 609.png (976×1 px, 296 KB)

  1. AC2: Confirm that the dialog applies the notheme class.
Note: none of the other overlays/dialogs in AC3 have the notheme class.

screenshot 613.png (976×1 px, 373 KB)

  1. AC3: Repeat tests in T363780#9844963
screenshot 612.png (976×1 px, 291 KB)
screenshot 611.png (976×1 px, 326 KB)
The Apply settings button is colored differently. But oddly, if you click on the "Input" tab and then back to "Display" the button color is correct, and stays that way until you reload.
screenshot 610.png (976×1 px, 306 KB)
screenshot 112.mov.gif (976×1 px, 1 MB)
The title of the "Add languages" overlay is not legible.
screenshot 110.mov.gif (976×1 px, 728 KB)
The text on the "Translate this page" overlay is not legible.
screenshot 111.mov.gif (976×1 px, 1 MB)

Kim - can you also apply the notheme class to #language-settings-dialog - thanks in advance!

Change #1041197 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/UniversalLanguageSelector@master] Additional notheme classes

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

Change #1041197 merged by jenkins-bot:

[mediawiki/extensions/UniversalLanguageSelector@master] Adds additional notheme classes

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

Test Result - Beta

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

Test Artifact(s):

Test Steps

Test Case 1: Verify Legible Language Selector in Dark Mode

  1. Enable dark mode in the Vector 2022 skin.
  2. Navigate to this production page.
  3. Verify the language selector.
  4. AC1: Confirm that the language selector is legible and not be in dark mode.

See AC2

  1. AC2: Confirm that the dialog applies the notheme class.
ULS
screenshot 714.png (990×1 px, 370 KB)
Add Languages
screenshot 716.png (990×1 px, 377 KB)
Language Settings
screenshot 717.png (990×1 px, 342 KB)
  1. AC3: Repeat tests in T363780#9844963
Clicking "Missing in français, 粵語 and more" opens this dialog.The text on the "Translate this page" overlay is not legible and does not have the notheme class.
screenshot 715.png (990×1 px, 406 KB)
This issue looks like a separate issue than the one being addressed by this task. The Apply settings button is colored differently. But oddly, if you click on the "Input" tab and then back to "Display" the button color is correct, and stays that way until you reload.
screenshot 126.mov.gif (758×1 px, 789 KB)

@KSarabia-WMF looks like this should also apply to .cx-uls-entrypoint__panel-container

For the very last one, I thought this was intentional because the button is disabled in this initial state, which makes sense. It's definitely a separate issue.

Kim: I'm referring to

screenshot 715.png (990×1 px, 406 KB)
as the remaining blocker here.

Kim is going to push a new patch after this call.

Change #1041757 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/ContentTranslation@master] add "notheme" class to cx-uls-entrypoint__panel-c

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

Change #1041757 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] add "notheme" class to cx-uls-entrypoint__panel-c

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

meeting notes: AC3 requires enable "content translation" user preference on beta.

Test Result - PROD

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Steps

Test Case 1: Verify Legible Language Selector in Dark Mode

  1. Enable dark mode in the Vector 2022 skin.
  2. Navigate to this production page.
  3. Verify the language selector.
  4. AC1: Confirm that the language selector is legible and not be in dark mode.

See AC2

  1. AC2: Confirm that the dialog applies the notheme class.
ULS
2024-06-14_11-42-38.png (1×2 px, 477 KB)
Add Languages
2024-06-14_11-44-46.png (1×1 px, 402 KB)
Language Settings
2024-06-14_11-46-14.png (1×2 px, 440 KB)
  1. ✅ AC3: Repeat tests in T363780#9844963
2024-06-13_13-18-07.png (1×2 px, 543 KB)
This issue looks like a separate issue than the one being addressed by this task. The Apply settings button is colored differently. But oddly, if you click on the "Input" tab and then back to "Display" the button color is correct, and stays that way until you reload.
screenshot 126.mov.gif (758×1 px, 789 KB)

Second issue is being taking care of in https://phabricator.wikimedia.org/T367590

Jdlrobson claimed this task.

Thanks!