Special:EditGrowthConfig, Special:MentorDashboard and Special:EnrollAsMentor has color contrast issues in night theme
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Jdlrobson
	May 31 2024, 4:18 PM

Description

Background

Special:EditGrowthConfig has color contrast issues in night theme.,

User story

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

Requirement

Ensure that Special:EditGrowthConfig, Special:MentorDashboard, and Special:EnrollAsMentor are legible and have proper color contrast in night mode.

BDD

Feature: Color Contrast for Growth Features in Night Mode

  Scenario: Ensure Special:EditGrowthConfig is compatible with night mode
    Given the user has enabled night mode
    When the user visits Special:EditGrowthConfig
    Then all elements should be legible
    And all elements should have proper color contrast

  Scenario: Ensure Special:MentorDashboard is compatible with night mode
    Given the user has enabled night mode
    When the user visits Special:MentorDashboard
    Then all elements should be legible
    And all elements should have proper color contrast

  Scenario: Ensure Special:EnrollAsMentor is compatible with night mode
    Given the user has enabled night mode
    When the user visits Special:EnrollAsMentor
    Then all elements should be legible
    And all elements should have proper color contrast

Test Steps

Test Case 1: Verify Special:EditGrowthConfig in Night Mode

Enable night mode.
Navigate to Special:EditGrowthConfig.
AC1: Confirm that all elements are legible.
AC2: Confirm that all elements have proper color contrast.

Test Case 2: Verify Special:MentorDashboard in Night Mode

Enable night mode.
Navigate to Special:MentorDashboard.
AC3: Confirm that all elements are legible.
AC4: Confirm that all elements have proper color contrast.

Test Case 3: Verify Special:EnrollAsMentor in Night Mode

Enable night mode.
Navigate to Special:EnrollAsMentor.
AC5: Confirm that all elements are legible.
AC6: Confirm that all elements have proper color contrast.

Acceptance criteria

Night mode is enabled on https://test.wikipedia.org/wiki/Special:EditGrowthConfig?vectornightmode=1
Night mode is enabled on https://test.wikipedia.org/wiki/Special:EnrollAsMentor?vectornightmode=1
Night mode is enabled on https://en.wikipedia.org/wiki/Special:MentorDashboard

Communication criteria - does this need an announcement or discussion?

N/A

Rollback plan

N/A

This task was created by Version 1.0.0 of the Web team task template using phabulous

Details

	Subject	Repo	Branch	Lines +/-
	Fixes colors of data table sort icons and header in dark mode	mediawiki/extensions/GrowthExperiments	master	+13 -1
	Use codex design tokens rather than hardcoded values for MentorDashboard	mediawiki/extensions/GrowthExperiments	master	+2 -2

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T366760 [EPIC] Dark mode for Growth team maintained features
		Resolved		Jdlrobson	T366376 Special:EditGrowthConfig, Special:MentorDashboard and Special:EnrollAsMentor has color contrast issues in night theme

Event Timeline

Jdlrobson created this task.May 31 2024, 4:18 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 31 2024, 4:18 PM

Jdlrobson renamed this task from Special:EditGrowthConfig has color contrast issues in night theme to Special:EditGrowthConfig and Special:EnrollAsMentor has color contrast issues in night theme.May 31 2024, 4:37 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Backlog to Excluded experiences on the FY2023-24-WE 2.1 Typography and palette customizations board.May 31 2024, 4:46 PM

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

• OKJ04 added a subtask: T366433: CentralAuth tests broken unless you run them inside Quibble.Jun 3 2024, 1:39 AM

JJMC89 removed a subtask: T366433: CentralAuth tests broken unless you run them inside Quibble.Jun 3 2024, 1:44 AM

Michael added a subtask: T366458: CommunityConfiguration: Release extension to all Wikipedias with GrowthExperiments.Jun 3 2024, 10:22 AM

Michael updated the task description. (Show Details)Jun 3 2024, 10:25 AM

Probably the best way to solve this for Special:EditGrowthConfig is by getting rid of Special:EditGrowthConfig entirely, which we already plan to do by migrating to CommunityConfiguration on all wikis. However, I'm not aware of there being a specific date target for that yet.

Not sure what the plan for Special:EnrollAsMentor is.

Jdlrobson renamed this task from Special:EditGrowthConfig and Special:EnrollAsMentor has color contrast issues in night theme to Special:EditGrowthConfig, Special:MentorDashboard and Special:EnrollAsMentor has color contrast issues in night theme.Jun 3 2024, 7:06 PM

Jdlrobson updated the task description. (Show Details)

I checked Special:EnrollAsMentor and Special:MentorDashboard for accessibility (i.e. contrast issues)

(1) for Special:EnrollAsMentor there is only one contrast issue is reported:

Screen Shot 2024-06-04 at 4.47.26 PM.png (1×2 px, 208 KB)

(2) Special:MentorDashboard has also only one contrast issues

Screen Shot 2024-06-04 at 4.49.22 PM.png (928×1 px, 102 KB)

Additionally, the icons in the mentee activity table are not visible in the dark mode:

Screen Shot 2024-06-04 at 4.56.37 PM.png (1×2 px, 396 KB)

Etonkovidova moved this task from Inbox to Needs Discussion on the Growth-Team board.Jun 4 2024, 11:58 PM

None of the listed special pages is a part of MediaWiki-extensions-CommunityConfiguration, I'm removing the CommunityConfiguration release task as a subtask for that reason. We should obviously fix the problem though :).

Urbanecm_WMF removed a subtask: T366458: CommunityConfiguration: Release extension to all Wikipedias with GrowthExperiments.Jun 5 2024, 11:38 AM

KStoller-WMF added a parent task: T366760: [EPIC] Dark mode for Growth team maintained features.Jun 5 2024, 10:02 PM

Jdlrobson added a project: Web-Team-Backlog (Needs Prioritization (Tech)).Wed, Jun 26, 7:03 PM

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

[mediawiki/extensions/GrowthExperiments@master] Use codex design tokens rather than hardcoded values for MentorDashboard

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

gerritbot added a project: Patch-For-Review.Wed, Jun 26, 11:18 PM

In T366376#9863329, @Urbanecm_WMF wrote:

None of the listed special pages is a part of MediaWiki-extensions-CommunityConfiguration, I'm removing the CommunityConfiguration release task as a subtask for that reason. We should obviously fix the problem though :).

Isn't EditGrowthConfig the same as https://test.wikipedia.org/wiki/Special:CommunityConfiguration ?

@Etonkovidova I can't replicate the issues you flagged earlier - does this mean these have been fixed upstream? @Sgs https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/1050078 should fix the issues Elena flagged in MentorDashboard.

@KStoller-WMF do you have any objections with me enabling these pages in our next batch?

In T366376#9928941, @Jdlrobson wrote:

Isn't EditGrowthConfig the same as https://test.wikipedia.org/wiki/Special:CommunityConfiguration ?

Special:EditGrowthConfig will be replaced by Special:CommunityConfiguration within the next few weeks.
EditGrowthConfig was the page that allowed Community Configuration for only Growth features, Special:CommunityConfiguration is the page that will replace it as we rollout the new CommunityConfiguration extension. (Special:EditGrowthConfig will then redirect to Special:CommunityConfiguration).

@Etonkovidova I can't replicate the issues you flagged earlier - does this mean these have been fixed upstream? @Sgs https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/1050078 should fix the issues Elena flagged in MentorDashboard.

@KStoller-WMF do you have any objections with me enabling these pages in our next batch?

If the issues @Etonkovidova noticed earlier are resolved, then I have no objections. (I tried to test myself, but even with the ?vectornightmode=1 parameter I don't end up seeing those pages in night mode).

Change #1050078 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Use codex design tokens rather than hardcoded values for MentorDashboard

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

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.12; 2024-07-02).Thu, Jun 27, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.Thu, Jun 27, 5:31 PM

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

[mediawiki/extensions/GrowthExperiments@master] Fixes colors of data table sort icons and header in dark mode

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

gerritbot added a project: Patch-For-Review.Thu, Jun 27, 8:43 PM

@Jdlrobson, @KStoller-WMF - I re-tested Special:CommunityConfiguration (and submodules), Special:EnrollAsMentor, and Special:MentorDashboard. Below are the test results (testing is done on eswiki beta. The issues listed there are specific for Dark mode.
It seems that except the icons on Special:MentorDashboard - all looks fine.

Added the test results to

Test results - Special:CommunityConfiguration

Description	Element Location	Screenshot(s)
Accessibility issue - doesn't exist in Light mode Links must be distinguishable without relying on color (two issues)	`.ext-communityConfiguration-Guidelines__Guideline:nth-child(1) > p >` `.external.text` `<a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Community_configuration">Learn more</a>`

Note: The issue "Links must be distinguishable without relying on color" is present for any link in Community Configuration modules.

Special:EnrollAsMentor and Special:MentorshipDashboard were tested on cswiki beta.

Test results - Special:EnrollAsMentor - ✅ No issues

Test results - Special:MentorshipDashboard

Description	screenshots
the icons in the table are still not visible

Etonkovidova mentioned this in T367058: QA Growth-related OOUI updates (mobile + desktop).Thu, Jun 27, 9:36 PM

the icons in the table are still not visible

Yep this is covered by the last remaining patch https://gerrit.wikimedia.org/r/1050463 🙌

In T366376#9932722, @Jdlrobson wrote:

the icons in the table are still not visible

Yep this is covered by the last remaining patch https://gerrit.wikimedia.org/r/1050463 🙌

Thx! Yes, I've added this task to my list of the tasks to follow up. As soon as the patch is merged, I re-check.

Change #1050463 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Fixes colors of data table sort icons and header in dark mode

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

Maintenance_bot removed a project: Patch-For-Review.Fri, Jun 28, 10:30 AM

In T366376#9933773, @gerritbot wrote:

Change #1050463 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Fixes colors of data table sort icons and header in dark mode

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

Checked on cswiki beta - the fix works:

Screen Shot 2024-06-28 at 10.11.07 AM.png (1×3 px, 321 KB)

Jdlrobson closed this task as Resolved.Mon, Jul 1, 11:28 PM

Jdlrobson claimed this task.

Jdlrobson edited projects, added Web-Team-Backlog (FY2024-25 Q1 Sprint 1); removed Web-Team-Backlog (Needs Prioritization (Tech)).

GMikesell-WMF mentioned this in T368686: Verify 1.43.0-wmf.12 deployment.Wed, Jul 3, 9:38 PM

Edtadros updated the task description. (Show Details)Fri, Jul 12, 3:53 AM

I'm not seeing any issues in production.

Etonkovidova updated the task description. (Show Details)Tue, Jul 16, 8:48 PM

Etonkovidova awarded a token.

	F55974195: Screen Shot 2024-06-28 at 10.11.07 AM.png
	Fri, Jun 28, 5:13 PM

	F55931058: Screen Shot 2024-06-27 at 2.22.59 PM.png
	Thu, Jun 27, 9:34 PM

	F55930680: Screen Shot 2024-06-27 at 1.56.09 PM.png
	Thu, Jun 27, 9:34 PM

	F54945821: Screen Shot 2024-06-04 at 4.56.37 PM.png
	Jun 4 2024, 11:57 PM

	F54945810: Screen Shot 2024-06-04 at 4.49.22 PM.png
	Jun 4 2024, 11:57 PM

	F54945807: Screen Shot 2024-06-04 at 4.47.26 PM.png
	Jun 4 2024, 11:57 PM

Special:EditGrowthConfig, Special:MentorDashboard and Special:EnrollAsMentor has color contrast issues in night themeClosed, ResolvedPublicActions