Page MenuHomePhabricator

[Bug] Language button is transparent and inaccessible in disabled state
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT

Description

Steps to reproduce

  1. Visit https://en.m.wikipedia.org/wiki/Every_Singaporean_Son_%E2%80%93_Epilogue
  2. Look at language button

Expected results

  • It's accessible. Use the disabled color and no opacity.

Note: For disabled state is not required that the meet AA contrast ratios.

Actual results

  • It's transparent and inaccessible

Screenshot 2024-04-03 at 6.47.02 PM.png (2,056×286 px, 54 KB)

Screenshot 2024-04-03 at 6.47.23 PM.png (2,044×336 px, 58 KB)

Environments observed

  • Night theme
  • Light theme

Check any additional observations

Stack trace

Console output

QA Results - Beta

ACStatusDetails
1✅T361693#9798189

QA Results - PROD- test.wiki

ACStatusDetails
1✅T361693#9827822

Event Timeline

Aklapper renamed this task from [Bug] Example title to [Bug] Language button is transparent and inaccessible.Apr 3 2024, 11:37 AM
ovasileva renamed this task from [Bug] Language button is transparent and inaccessible to [Bug] Language button is transparent and inaccessible in disabled state.Apr 4 2024, 8:07 AM
ovasileva triaged this task as Medium priority.
ovasileva subscribed.

@Jdlrobson - is this a regression?

No looks like this has always been broken.

Jdlrobson set the point value for this task to 1.

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

[mediawiki/skins/MinervaNeue@master] [Proof of concept] Make disabled language button accessible

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

A number of things that make this complicated:

  • I believe this icon is coming from OOUI. I can swap it to codex, which resolves the color issue, but it's still not the easiest thing in the world to color it differently depending on disabled state
  • the larger issue is since some of this is, from what I can tell, set up for an OOUI icon, we're not handling the classes correctly for what I understand idiomatic codex to look like
  • in addition to this, the buttons and labels are being colored to color-subtle with the !important property, meaning that the disabled selector will have to be both more specific and also contain an !important property

Pausing on this for now to re-evaluate approach/priority as a team. I've attached a proof of concept should it help to visualize what I'm describing here

After doing some more research, I'm not convinced that this is using OOUI, but perhaps a third and more sinister thing? Regardless, I'd love a second pair of eyes on this ticket, since it's not the clearest to me whether this approach is correct

OOUI icon is not the issue here - it's the opacity defined here:
https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/8239b8bd9c3ade7dd947641c1c436121ffc47bdf/resources/skins.minerva.base.styles/pageactions.less#L19
Per A/C drop the opacity and add a rule for the new color and I think that should change the text.

If we also need to change the icon (check with Justin) we'll need to change the class on the HTML to use a new variant:
https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/8239b8bd9c3ade7dd947641c1c436121ffc47bdf/skin.json#L413

e.g. instead of
minerva-icon--language-base20 use minerva-icon--language-disabled after defining a "disabled" key and color alongside the existing warning, progressive and invert.

Gonna try this again - @Jdlrobson might bother you if I can't figure it out but thank you for the pointers!

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

[mediawiki/skins/MinervaNeue@master] Make language selector disabled state accessible contrast

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

Change #1029300 abandoned by Stoyofuku-wmf:

[mediawiki/skins/MinervaNeue@master] [Proof of concept] Make disabled language button accessible

Reason:

Addressed in https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1031091

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

image.png (3,450×430 px, 145 KB)

Worth noting that these are just shy of an accessible color contrast in night mode

Change #1031091 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Make language selector disabled state accessible contrast

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

Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

Test Steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Carnivore
Look at language button
Expected results
✅ AC1: It's accessible. Use the disabled color and no opacity.
Note: For disabled state is not required that the meet AA contrast ratios.

screenshot 65.mov.gif (1,532×1,004 px, 871 KB)

screenshot 66.mov.gif (1,532×1,004 px, 673 KB)

ovasileva claimed this task.

Test Result - PROD

Status: ✅ PASS
Environment: PROD - test.wiki
OS: macOS Sonoma 14.5
Browser: Chrome 125
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Visit https://test.m.wikipedia.org/wiki/Hooded_skunk?minervanightmode=1 and https://test.m.wikipedia.org/wiki/Hooded_skunk
Look at language button
Expected results
✅ AC1: It's accessible. Use the disabled color and no opacity.
Note: For disabled state is not required that the meet AA contrast ratios.

2024-05-23_13-02-09 (1).gif (2,974×1,356 px, 2 MB)

2024-05-23_13-01-16 (1).gif (2,434×1,350 px, 1 MB)