Suggested Edits: unstructured tasks onboarding elements not readable in Dark Mode
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	KStoller-WMF
	Jul 31 2024, 9:50 PM

Description

Background

The Web team is releasing dark mode more widely. To prepare for this, some Growth maintained features need improvements.

User story

As a new editor who uses dark mode, I want the ability to use dark mode when viewing the Suggested Edit onboarding (of a unstructured task)

Suggested Edit onboarding - many elements are non-readable

Screen Shot 2024-06-22 at 4.27.09 PM.png (1×830 px, 152 KB)

Acceptance Criteria:

Given I'm completing a Suggested Edit,
When I'm viewing the onboarding in dark mode,
Then all elements are readable and pass WCAG AA contrast requirements

Details

Subject	Repo	Branch	Lines +/-
fix: dark-mode: Make highlights in onboarding dialogues readable	mediawiki/extensions/GrowthExperiments	master	+19 -0
SuggestedEdits: fix dark mode contrast issues in higlighted text	mediawiki/extensions/GrowthExperiments	master	+2 -2
refactor(AddLinkOnboardingContent): introduce mixin for mark highlight styles	mediawiki/extensions/GrowthExperiments	master	+13 -11

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved		ovasileva	T341632 [EPIC] Palette customizations and dark mode
Open		None	T366760 [EPIC] Dark mode for Growth team maintained features
Resolved		Etonkovidova	T367058 QA Growth-related OOUI updates (mobile + desktop)
Resolved		Cyndymediawiksim	T369588 Dark Mode: Suggested Edits & Structured Tasks
Resolved	BUG REPORT	Sgs	T371564 Suggested Edits: unstructured tasks onboarding elements not readable in Dark Mode

Event Timeline

KStoller-WMF triaged this task as Medium priority.Jul 31 2024, 9:50 PM

KStoller-WMF created this task.

KStoller-WMF moved this task from Inbox to Up Next on the Growth-Team board.

Sgs renamed this task from Suggested Edits: some onboarding elements not readable in Dark Mode to Suggested Edits: unstructured tasks onboarding elements not readable in Dark Mode .Aug 6 2024, 11:57 AM

KStoller-WMF updated the task description. (Show Details)Aug 6 2024, 4:11 PM

Sgs moved this task from Up Next to FY2024-25 Q1 Sprint 3 on the Growth-Team board.Aug 7 2024, 11:35 AM

Sgs edited projects, added Growth-Team (FY2024-25 Q1 Sprint 3); removed Growth-Team.

Sgs claimed this task.Aug 8 2024, 3:15 PM

Sgs moved this task from Incoming to Doing on the Growth-Team (FY2024-25 Q1 Sprint 3) board.

Sgs attached a referenced file: F55632449: Screen Shot 2024-06-22 at 4.27.09 PM.png. (Show Details)Aug 12 2024, 1:59 PM

There are a couple of issues impeding us to use the Codex background color token that should apply here (@background-color-progressive-subtle, #eaf3ff) to fix the contrast issues in the help panel header and content body header. See T357740: Less color functions not compatible with CSS custom properties.

Issue (1) is, in light mode, both elements use the progressive subtle color faded by a 50% using Less's fade() function see source.

Issue (2) is, in light mode, the header element uses Less's line-gradient function, adding some fancy styles including an animation of the back-ground color.

The proposal to move forward, as mentioned in T357740, would be to have an extended color palette using CSS hsl/hsla colors until Codex provides it. That should solve the fading issues. As per the linear-gradient , the refactor to CSS is not direct but should be doable. In worst case we could drop the color gradation until Codex has figured this out. cc @Michael

Change #1062065 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] refactor(AddLinkOnboardingContent): introduce mixin for mark highlight styles

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

Change #1062066 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: fix dark mode contrast issues in higlighted text

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

KStoller-WMF mentioned this in Growth-Team (FY2024-25 Q1 Sprint 4).Aug 19 2024, 10:25 PM

Michael moved this task from FY2024-25 Q1 Sprint 3 to FY2024-25 Q1 Sprint 4 on the Growth-Team board.Aug 20 2024, 11:14 AM

Michael edited projects, added Growth-Team (FY2024-25 Q1 Sprint 4); removed Growth-Team (FY2024-25 Q1 Sprint 3).

Michael moved this task from Incoming to Doing on the Growth-Team (FY2024-25 Q1 Sprint 4) board.

Change #1067925 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/extensions/GrowthExperiments@master] fix: dark-mode: Make highlights in onboarding dialogues readable

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

Change #1062065 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] refactor(AddLinkOnboardingContent): introduce mixin for mark highlight styles

Reason:

Drop in favor of Ic34f415f3efc79579690316e1146034ff5fd3521

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

Change #1062066 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] SuggestedEdits: fix dark mode contrast issues in higlighted text

Reason:

Drop in favor of Ic34f415f3efc79579690316e1146034ff5fd3521

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

Sgs moved this task from Doing to Code Review on the Growth-Team (FY2024-25 Q1 Sprint 4) board.Sep 2 2024, 3:56 PM

Change #1067925 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] fix: dark-mode: Make highlights in onboarding dialogues readable

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

Maintenance_bot removed a project: Patch-For-Review.Sep 3 2024, 11:30 AM

Sgs moved this task from Code Review to QA on the Growth-Team (FY2024-25 Q1 Sprint 4) board.Sep 4 2024, 12:00 PM

Urbanecm_WMF edited projects, added Growth-Team (FY2024-25 Q1 Sprint 5); removed Growth-Team (FY2024-25 Q1 Sprint 4).Sep 5 2024, 9:35 AM

Urbanecm_WMF moved this task from Incoming to QA on the Growth-Team (FY2024-25 Q1 Sprint 5) board.

KStoller-WMF edited projects, added Growth-Team (FY2024-25 Q1 Sprint 6); removed Growth-Team (FY2024-25 Q1 Sprint 5).Sep 16 2024, 10:44 PM

Sgs moved this task from Incoming to QA on the Growth-Team (FY2024-25 Q1 Sprint 6) board.Sep 17 2024, 3:02 PM

Checked in betalabs - the text is readable in dark mode

Screen Shot 2024-09-19 at 5.10.57 PM.png (974×838 px, 109 KB)

Screen Shot 2024-09-19 at 5.06.44 PM.png (1×854 px, 143 KB)

The suggested-edits-panel-header elements have low contrast - filed as T375250.

	F57524942: Screen Shot 2024-09-19 at 5.06.44 PM.png
	Sep 20 2024, 12:23 AM

	F57524945: Screen Shot 2024-09-19 at 5.10.57 PM.png
	Sep 20 2024, 12:23 AM

	F55632449: Screen Shot 2024-06-22 at 4.27.09 PM.png
	Jul 31 2024, 9:50 PM

Suggested Edits: unstructured tasks onboarding elements not readable in Dark Mode Closed, ResolvedPublicBUG REPORTActions