Page MenuHomePhabricator

Hamburger menu icon inaccessible on a UCMini browser
Closed, ResolvedPublic

Description

As a user of the UC Mini browser I want to be able to access the main menu to navigate to other pages.

Background:
Due to a lack of support for pseudo-elements (:before) and the text-indent on an .mw-ui-icon, icons do not render in UC Mini browser.

This results in a blank space where the icon should be that is unclickable.

This would be fixable if we could ship additional CSS to the client that removes the text-indent for this browser.

Event Timeline

jhobs moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.

@ovasileva sadly not. The icon will still be invisible even with T147369 solved.

Jdlrobson changed the task status from Open to Stalled.EditedNov 23 2016, 4:21 PM

This will need a spike before we can work on this to explore different solutions.

ovasileva lowered the priority of this task from High to Medium.EditedMar 6 2017, 7:47 PM
ovasileva added a subscriber: Nirzar.

A possible solution would be to remove the icon and replace it with a text label which says "menu". @Nirzar - any thoughts/ideas?

This is a big issue. we should have a fallback for :before and :after on UC browser.

@Jdlrobson is there a way to target only UC browser and use background-image on icon itself?

A possible solution would be to remove the icon and replace it with a text label which says "menu".

I don't think it's a scalable solution, sadly. with localization this would break, given we have 3 icons in the header.

The UC browser doesn't seem to be targetable by anything aside of browser sniffing, which is not a good idea due to being not completely reliable. In this specific case, it might be the best way forward.

From http://www.ucweb.com/download/UCBrowser_User_Agent_en.pdf:

How do websites judge via UA whether a visitor is visiting them with UC Browser or not?
UC Browser
UA will contain UC Browser fields

Examples
U2-mini in Android platform with speed mode on, UA example:
UCWEB/2.0 (Linux; U; Adr 2.3; en-US; MI-ONEPlus) U2/1.0.0 UCBrowser/8.6.0.199 U2/1.0.0 Mobile

U2-mini in Android platform with speed mode off, UA example: (OBUA is the UA of built - in browser)
OBUA UCBrowser/8.6.0.199 Mobile

UA sniffing requires JS at which point we might as well explore polyfills for pseudo elements.
OOjs UI uses actual elements rather than pseudo elements to avoid this problem.

Given the elements impacted are mw-ui-icon-element I wonder if there is a solution here which falls back to applying the background image to the element itself. The pseudo element is only necessary when icons are accompanied by text (mw-ui-icon-before) in which case not showing the icon is not a terrible thing as the icon is still visible and usable.

Is this something we should revisit?

We discussed this in frontend standards meeting.

We've suggested we'll add a new opt-in class for important icons where we should support without pseudo elements that we can use on elements such as the main menu and search to avoid breaking other icon usages unintentionally. For these mw-ui-icon-element will be forced to use the actual element rather than the psuedo element

I've commied to attempting to write a patch for mediawiki ui in core so we can chat about this further.

Out of the Front-end-Standards-Group discussion today, a special (mediawiki.ui) class for handling icon-only elements seems like a good compromise.
We also have .mixin-screen-reader-text() mixin to use in this class for accessibility reasons.

Change 341913 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend] hamburger icon should show in UC Mini

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

Change 341914 had a related patch set uploaded (by Jdlrobson):
[mediawiki/core] Introduce mw-ui-icon-standalone

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

^ @Volker_E this is the sort of thing I had in mind. Let me know your thoughts.

Jdlrobson changed the task status from Stalled to Open.May 2 2017, 6:04 PM

@Nirzar - are we ready to work on this? Moving this to the design column for now - move back if it doesn't belong there!

@ovasileva getting @Volker_E to prioritize it but this column is fine. it will be tracked on UI-Standardization board

Jdlrobson changed the task status from Open to Stalled.May 11 2017, 11:42 AM
Jdlrobson reassigned this task from Jdlrobson to Volker_E.

Change 341913 abandoned by Jdlrobson:
hamburger icon should show in UC Mini

Reason:
Blocked on https://gerrit.wikimedia.org/r/#/q/Ib6032fce719f0f1aa94bec79d431980c907909af - not working on this until that gets merged.

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

Change 341914 abandoned by Jdlrobson:
Introduce mw-ui-icon-standalone

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

This appears to be resolved. In the latest version of UCMini I can see the icon.