Contrast of radio buttons on AMC History page is bad on Android/Firefox
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To

Authored By

	Nux
	Mar 14 2020, 9:55 PM

Description

Samsung S10; 435 ppi (I think screen density might be a factor here).
Firefox 68.6 (latest mobile).
Log in (I have "Advanced mode" enabled in mobile settings).
Open any history page - e.g.: https://en.m.wikipedia.org/w/index.php?title=History_of_snooker&action=history

Contrast of controls on the history page is very bad. I have pretty good eye sight, but I still find it hard to identify non-selected radiobuttons and checkboxes.

Screenshot_20200314-225034_Firefox.jpg (2×1 px, 447 KB)

Developer notes

This is a leftover customization of radio and input looks. It was originally done as override of reset.less customization, which later got removed, while this specific override stayed-in and is now causing issues as only defining border-color nulls the whole native OS/browser styling.

QA Results - Prod

AC	Status	Details
1	❌	T247683#6200506

Details

	Subject	Repo	Branch	Lines +/-
	PageHistory: Remove input overrides breaking mobile Firefox	mediawiki/skins/MinervaNeue	master	+0 -6

Customize query in gerrit

Event Timeline

Nux created this task.Mar 14 2020, 9:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 14 2020, 9:55 PM

Reedy added projects: Accessibility, Mobile.Mar 14 2020, 9:58 PM

Hi @Nux, thanks for taking the time to report this. Please add a more complete description to this task, including clear steps to reproduce (URL) and browser information, browser version information, and operating system information. Controls are often drawn by the browser toolkit itself.

You can edit the task description by clicking Edit Task. Ideally, a good description should allow any other person to follow these steps (without having to interpret steps) and see the same results.

Nux updated the task description. (Show Details)Mar 15 2020, 10:11 AM

Sorry, I thought that was universal. I guess "Advanced mode" setting is crucial here.

Note that this is not the fault of Firefox. Border is modified in CSS for some reason:

.action-history #pagehistory input[type='radio'],
.action-history #pagehistory input[type='checkbox'] {
  float: left;
  position: relative;
  display: inline-block;
  top: 5px;
  margin-right: 10px;
  border: 1px solid #c8ccd1;
}

Nux updated the task description. (Show Details)Mar 15 2020, 10:27 AM

Aklapper renamed this task from a11y or wcag problem with history to Contrast of controls on history page is bad.Mar 15 2020, 1:08 PM

Aklapper changed the task status from Stalled to Open.

Aklapper added a project: Advanced Mobile Contributions.

Jdlrobson added a project: Web-Team-Backlog.Mar 19 2020, 11:23 PM

Jdlrobson moved this task from Needs triage to MobileFrontend specific on the Mobile board.

Jdlrobson moved this task from MobileFrontend specific to Triaged on the Mobile board.

Checked on Chrome and Opera, seems to be Firefox only.

Noting that this thankfully isn't an issue on Android/Chrome

Screenshot_20200324-161619.png (2×1 px, 342 KB)

• alexhollender_WMF renamed this task from Contrast of controls on history page is bad to Contrast of radio buttons on AMC History page is bad on Android/Firefox.Mar 24 2020, 8:24 PM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptMar 24 2020, 8:24 PM

Change 597154 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] PageHistory: Remove input overrides breaking mobile Firefox

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

gerritbot added a project: Patch-For-Review.May 18 2020, 8:20 PM

Reproducible on latest Firefox 68.8 for Android. It's pretty unusable as is.
Luckily the rules to overrides that the current breaking rules are tackling, are gone.

Volker_E edited projects, added Web-Team-Backlog (Kanbanana-2019-20-Q4); removed Web-Team-Backlog.May 18 2020, 8:21 PM

More fun with half-baked input customizations: Current rendering in IE 11 (before patch)

(on a real device)

Change 597154 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] PageHistory: Remove input overrides breaking mobile Firefox

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.34; 2020-05-26).May 18 2020, 11:00 PM

Maintenance_bot removed a project: Patch-For-Review.May 18 2020, 11:10 PM

ovasileva set the point value for this task to 2.May 20 2020, 4:16 PM

Volker_E updated the task description. (Show Details)May 20 2020, 4:21 PM

Volker_E removed the point value for this task.

Volker_E set the point value for this task to 2.Jun 1 2020, 5:19 PM

ovasileva moved this task from Needs QA to Needs QA in Prod on the Web-Team-Backlog (Kanbanana-2019-20-Q4) board.Jun 1 2020, 5:20 PM

Volker_E assigned this task to Edtadros.Jun 1 2020, 5:21 PM

Test Result - Prod

Status: ❌ FAIL
Environment: enwiki
OS: macOS Catalina
Browser: Chrome, Firefox
Device: Samsung S10 (BrowserStack)
Emulated Device: na

Test Artifact(s):

QA steps

S10; 435 ppi (I think screen density might be a factor here).
Firefox 68.6 (latest mobile).
Log in (I have "Advanced mode" enabled in mobile settings).
Open any history page - e.g.: https://en.m.wikipedia.org/w/index.php?title=History_of_snooker&action=history

❌ AC1: Contrast of the controls should be visible.
This fails for Firefox still. I included Chrome for reference on the same device at the same time.

Firefox	Chrome

Edtadros updated the task description. (Show Details)Jun 8 2020, 6:37 AM

I fear we're living in a world of horror. The typical candidates to make inputs disappear like background-color/color/appearance/opacity` are nowhere applied here.
It works in Firefox Preview on Android.

Screenshot_20200608-103946_2.png (1×1 px, 160 KB)

After looking into it closer, the 'fail' state is the default state of Firefox/Android!!!

Screenshot_20200608-103907_2.png (1×1 px, 164 KB)

After removing the custom border, every other solution would involve a lot more work and other side-effects (using deprecated mediawiki.ui/transforming to OOUI) that I'd like to hear @ovasileva @Jdlrobson's inputs here. Sadly (also for myself as Firefox/Android user), I think putting this on wontfix seems like most reasonable option given that Firefox Preview is already going above changing default appearance and Firefox own style guide for future interfaces Photon goes into same direction.

In T247683#6202919, @Volker_E wrote:

After removing the custom border, every other solution would involve a lot more work and other side-effects (using deprecated mediawiki.ui/transforming to OOUI) that I'd like to hear @ovasileva @Jdlrobson's inputs here. Sadly (also for myself as Firefox/Android user), I think putting this on wontfix seems like most reasonable option given that Firefox Preview is already going above changing default appearance and Firefox own style guide for future interfaces Photon goes into same direction.

Works for me. I inspected the styles on the radio button, and this just seems to be a Firefox issue that I'm not sure is worth investing a lot of time into especially if a fix is coming from them soon

	F31858158: Screenshot_20200608-103946_2.png
	Jun 8 2020, 5:53 PM

	F31858159: Screenshot_20200608-103907_2.png
	Jun 8 2020, 5:53 PM

	F31857629: Screen Shot 2020-06-07 at 11.30.09 PM.png
	Jun 8 2020, 6:36 AM

	F31857631: Screen Shot 2020-06-07 at 11.31.00 PM.png
	Jun 8 2020, 6:36 AM

	F31700509: Screenshot_20200324-161619.png
	Mar 24 2020, 8:23 PM

	F31681470: Screenshot_20200314-225034_Firefox.jpg
	Mar 14 2020, 9:55 PM

	F31832129: image.png
	May 18 2020, 8:32 PM

Contrast of radio buttons on AMC History page is bad on Android/FirefoxClosed, ResolvedPublic2 Estimated Story PointsActions