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.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Declined | None | T143916 [EPIC] Better support for low grade/remote browsers needed | |||
| Duplicate | None | T136802 [Epic] Make Wikipedia work on remote browsers (UC mini and Opera mini) | |||
| Resolved | Volker_E | T146703 Hamburger menu icon inaccessible on a UCMini browser |
most likely to be closed after T147369: UC Mini (speed mode) receives broken Grade A mode (change to Grade C)
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
Change 341914 had a related patch set uploaded (by Jdlrobson):
[mediawiki/core] Introduce mw-ui-icon-standalone
@Volker_E bump - we are still waiting for a review on https://gerrit.wikimedia.org/r/#/c/341914/
@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
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.