Fix Echo color contrast issues in standard theme & night mode
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	KStoller-WMF
	May 30 2024, 8:28 PM

Description

Steps to replicate the issue

Log in and open Echo
Check the Echo overlay for color contrast issues

What happens?:
Lots of color contrast issues.
Details in T364805: Echo has color contrast issues in standard theme and night theme

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

Design Guidance:

Proposal	Contrast	Contrast
Unread proposal	`background-color/interactive` `text-color/base`	`background-color/interactive` `text-color/subtle`
'test' text uses `#202122 (text-color/base)`; 'username' text uses `#54595d (text-color/subtle)`
Read proposal	`background-color/base` `text-color/base`	`background-color/base text-color/subtle`
'test' text uses `#202122 (text-color/base)`; 'username' text uses `#54595d (text-color/subtle)`

Acceptance Criteria:

Given I'm viewing Echo notification in standard theme
When I run an accessibility check,
Then color contrast tests pass at WCAG Level AA

Given I'm viewing Echo notification in night mode
When I run an accessibility check,
Then color contrast tests pass at WCAG Level AA

(Fixing the standard theme by using design tokens should also fix night mode)

QA Results - Beta

AC	Status	Details
1	❌	T366322#9914579

Details

	Subject	Repo	Branch	Lines /-
	Enable dark mode for echo overlay	mediawiki/extensions/Echo	master	34 -15
	Remove OOUI overrides	mediawiki/skins/Vector	master	3 -21

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
Resolved		ovasileva	T367150 Deploy dark mode to logged-out users in tier 1 and 2 wikis on the Vector2022 and Minerva skin
Resolved	BUG REPORT	JFernandez-WMF	T364805 Echo has color contrast issues in standard theme and night theme
Open		None	T366760 [EPIC] Dark mode for Growth team maintained features
Resolved		ovasileva	T366322 Fix Echo color contrast issues in standard theme & night mode

Event Timeline

KStoller-WMF created this task.May 30 2024, 8:28 PM

KStoller-WMF attached a referenced file: F54742274: Screenshot 2024-05-30 at 13.58 1.png. (Show Details)

KStoller-WMF attached a referenced file: F54742982: Screenshot 2024-05-30 at 16.13 1.png. (Show Details)

KStoller-WMF attached a referenced file: F54742227: Read proposal (1).png. (Show Details)

KStoller-WMF attached a referenced file: F54741905: Screenshot 2024-05-30 at 13.55 1.png. (Show Details)

KStoller-WMF attached a referenced file: F54742104: Screenshot 2024-05-30 at 15.59 2.png. (Show Details)

KStoller-WMF attached a referenced file: F54740269: Unread proposal.png. (Show Details)

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

KStoller-WMF mentioned this in T364805: Echo has color contrast issues in standard theme and night theme.May 30 2024, 8:33 PM

Fixing the standard theme by using design tokens should also fix night mode so web team is very interested in the outcome of this ticket! Thanks for creating it!

Jdlrobson mentioned this in T363780: [QA] Exploratory testing: Vector 2022 night theme.May 31 2024, 3:32 PM

Thank you @Jdlrobson! To clarify, would the task description proposal cover both standard and night modes? Or do we need to make a new proposal for night mode?

Jdlrobson moved this task from Backlog to Night mode (desktop) on the FY2023-24-WE 2.1 Typography and palette customizations board.May 31 2024, 4:47 PM

The description should cover both yes - if you use design tokens, these should work in both.

KStoller-WMF renamed this task from Fix Echo color contrast issues in standard theme to Fix Echo color contrast issues in standard theme & night mode.May 31 2024, 6:15 PM

KStoller-WMF updated the task description. (Show Details)

KStoller-WMF moved this task from Backlog to Up Next on the Growth-Team board.May 31 2024, 8:15 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

KStoller-WMF lowered the priority of this task from High to Medium.Jun 5 2024, 4:55 PM

Jdlrobson moved this task from Night mode (desktop) to Excluded experiences on the FY2023-24-WE 2.1 Typography and palette customizations board.Jun 5 2024, 6:16 PM

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

Not sure how this task differs from T358405 - Special:Notifications has color contrast issues in night mode

T358405 is for the special page. This is for the overlay itself. They likely have some overlap.

Jdlrobson added a project: Web-Team-Backlog (FY2023-24 Q4 Sprint 6).Jun 13 2024, 12:11 AM

Updating priority based on web team internal spreadsheet.

A short term fix to consider, to make this more cohesive with the dark mode design is to add the class skin-invert in Echo to the existing mw-echo-ui-overlay notheme element. This would invert the overlay, but would mean none of the hovers backgrounds would be visible. If we take this approach I'd recommend creating a subtask and keeping this one open for the long term fix.

The longer term (and proper) fix here is to use design tokens, and provide overrides for the dark theme where that doesn't exist, but maybe we don't want to do that now?

Jdlrobson set the point value for this task to 2.Jun 14 2024, 6:55 PM

ovasileva moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 17 2024, 11:24 AM

ovasileva added a parent task: T367150: Deploy dark mode to logged-out users in tier 1 and 2 wikis on the Vector2022 and Minerva skin.Jun 17 2024, 12:38 PM

@ovasileva @JScherer-WMF Echo has pre-existing color contrast issues in light theme and by inverting we'll add that to dark mode too. Are we okay with that?

Screenshot 2024-06-17 at 3.37.55 PM.png (1×862 px, 161 KB)

Screenshot 2024-06-17 at 3.38.17 PM.png (1×850 px, 191 KB)

In T366322#9901724, @Jdlrobson wrote:

@ovasileva @JScherer-WMF Echo has pre-existing color contrast issues in light theme and by inverting we'll add that to dark mode too. Are we okay with that?

We can go ahead with this for now and flag it as tech/UX/a11y debt to fix quickly.

JScherer-WMF removed JScherer-WMF as the assignee of this task.Jun 18 2024, 4:18 PM

JScherer-WMF moved this task from Design Review to Ready for estimation on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

Jdlrobson moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 18 2024, 4:23 PM

bwang claimed this task.Jun 18 2024, 5:39 PM

Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 18 2024, 6:19 PM

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

[mediawiki/extensions/Echo@master] Enable dark mode for echo overlay

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

gerritbot added a project: Patch-For-Review.Jun 20 2024, 5:35 PM

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

[mediawiki/skins/Vector@master] Remove OOUI popup from OOUI overrides in order to enable dark mode in echo

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

bwang removed bwang as the assignee of this task.Jun 20 2024, 5:52 PM

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

bwang subscribed.

Change #1048049 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove OOUI overrides

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

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 20 2024, 7:05 PM

Change #1048048 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Enable dark mode for echo overlay

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

Jdlrobson assigned this task to GMikesell-WMF.Jun 21 2024, 12:44 AM

Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.

ReleaseTaggerBot added a project: MW-1.43-notes (1.43.0-wmf.11; 2024-06-25).Jun 21 2024, 1:00 AM

Maintenance_bot removed a project: Patch-For-Review.Jun 21 2024, 1:30 AM

GMikesell-WMF updated the task description. (Show Details)Jun 21 2024, 9:41 PM

GMikesell-WMF updated the task description. (Show Details)

GMikesell-WMF updated the task description. (Show Details)Jun 21 2024, 9:53 PM

@KStoller-WMF @Jdlrobson @ovasileva Please review issues below, thanks!

Test Result - Beta

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

Test Artifact(s):

Color	Unread	Read	Both
Dark
Light			N/A

GMikesell-WMF updated the task description. (Show Details)Jun 21 2024, 10:12 PM

ovasileva moved this task from QA to Needs More Work on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 25 2024, 3:59 PM

bwang moved this task from Needs More Work to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q4 Sprint 6) board.Jun 25 2024, 4:09 PM

As part of signoff, create a ticket to address remaining pre-existing accessibility issues

Follow-up to be done in T368893: Fix Echo color contrast issues in standard theme & night mode (pt 2). Resolving this one.

GMikesell-WMF mentioned this in T367779: Verify 1.43.0-wmf.11 deployment.Jul 3 2024, 9:37 PM

ovasileva removed a subtask: T368893: Fix Echo color contrast issues in standard theme & night mode (pt 2).Jul 8 2024, 1:34 PM

	F55417518: Screenshot 2024-06-17 at 3.38.17 PM.png
	Jun 17 2024, 11:39 PM

	F55417515: Screenshot 2024-06-17 at 3.37.55 PM.png
	Jun 17 2024, 11:39 PM

	F54742274: Screenshot 2024-05-30 at 13.58 1.png
	May 30 2024, 8:28 PM

Fix Echo color contrast issues in standard theme & night modeClosed, ResolvedPublic2 Estimated Story PointsActions