Page MenuHomePhabricator

[Bug] Last modified bar is inaccessible (color contrast) in standard mobile mode, convert to blue
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Steps to reproduce

  1. Install https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf
  2. Create a new page
  3. Scroll to bottom of page to look at last modified bar
  4. Open extension

Expected results

No color contrast issues.

The white text on green background is not accessible.

Screenshot 2024-02-28 at 5.55.37 PM.png (226×2 px, 25 KB)

Actual results

We suggest using background-color-progressive for the background rather than the custom green.

Screenshot 2024-03-15 at 8.58.06 AM.png (157×1 px, 14 KB)

Environments observed

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

Check any additional observations

Stack trace

Console output

QA Results - Beta

ACStatusDetails
1T358736#9639685

QA Results - Prod

ACStatusDetails
1T358736#9667638

Event Timeline

ovasileva raised the priority of this task from Medium to High.Feb 29 2024, 2:15 PM
Jdlrobson set the point value for this task to 1.Feb 29 2024, 6:24 PM

@DTorsani-WMF are the new notification colours ready for primetime? We could implement the greens here in advance of them landing in codex officially.

@Jdlrobson Is there a link where @DTorsani-WMF and I can look at these banners in context?

How do these banners get triggered usually?

Thank you for this link and instruction. I have a couple questions:

  1. Can these bars be any other colors? If so, when and why do they change colors?
  2. Is there any specific reason this is green? Green typically conveys a "successful" type status. Does this feel aligned with that?
  3. If the answer to the first two questions is no, can we consider changing this to a color from the Gray palette?

The bar is gray normally:

Screenshot 2024-03-14 at 11.06.32 AM.png (78×1 px, 7 KB)

It becomes green if it has been modified in the last 24hrs.
I checked the archives for the design rationale and found this from 2013 https://static-bugzilla.wikimedia.org/show_bug.cgi?id=56862
"This draws attention to the fact that the article is 'fresh' and has recently been edited"

In regards to your questions:

  • We can use whatever colors you think necessary.
  • We can remove this treatment if you think it is no longer useful.

Thanks for this additional context. I wonder if this might be an opportunity to use a blue color, and having this somewhat relate to a progressive or modified in regards to adding (like in the diff colors) state of mind. @bmartinezcalvo Do you think blue would make sense here, or should we keep green and just update the value to meet accessibility criteria?

Thanks for this additional context. I wonder if this might be an opportunity to use a blue color, and having this somewhat relate to a progressive or modified in regards to adding (like in the diff colors) state of mind. @bmartinezcalvo Do you think blue would make sense here, or should we keep green and just update the value to meet accessibility criteria?

I agree with using Blue in this case. Since this is not a Success notification but a notice one, and the default version of this is already Gray, we could use Blue600 in this case to make the bar more prominent when the article was modified in the last 24h.

Just keep in mind that if we go with this blue version, we might need to include a new blue background color token since the current background-color-progressive is reserved for interactive elements such as buttons.

Thanks for your input Bárbara. I'd say let's use blue instead then. I would actually suggest we do use background-color-progressive so to not block this fix with the need for a new token. I might suggest we actually expand upon the definition of what progressive tokens can be used for in the future to capture this and other potentially related needs.

So to confirm it should look like this?:

Screenshot 2024-03-15 at 8.58.06 AM.png (157×1 px, 14 KB)

Jdlrobson renamed this task from [Bug] Last modified bar is inaccessible (color contrast) in standard mobile mode to [Bug] Last modified bar is inaccessible (color contrast) in standard mobile mode, convert to blue.Mar 15 2024, 4:31 PM
Jdlrobson removed DTorsani-WMF as the assignee of this task.
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated Other Assignee, added: DTorsani-WMF.
Jdlrobson updated the task description. (Show Details)

Change 1011348 had a related patch set uploaded (by Stoyofuku-wmf; author: Stoyofuku-wmf):

[mediawiki/skins/MinervaNeue@master] Update last modified bar to have an accessible color contrast

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

Change 1011348 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] [VISUAL CHANGE] Update last modified bar to have an accessible color contrast

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

Unassigning myself from this and putting it in code review.

Patch has been merged so moving to QA.

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Last modified bar should be blue and have no WCAG Color Contrast issues:

screenshot 1.png (1×1 px, 396 KB)

Screenshot 2024-03-25 at 12.06.57 PM.png (666×2 px, 131 KB)

took a look in day mode as well. Looks good!

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Last modified bar should be blue and have no WCAG Color Contrast issues:

screenshot 123.png (1×1 px, 355 KB)

screenshot 124.png (1×1 px, 354 KB)