Last modified: 2014-02-12 23:55:26 UTC
Thus, can't search. Disabling images could be essential on slow connections or when roaming. This is not a regression from a MobileFrontend switchover, the old Ruby gateway was broken, too.
Created attachment 10190 [details] Suggested patch for seeing search button label with images disabled CSS background images should only be for aesthetic value and should not give meaning to an element. The search icon should thus probably be an img tag with alternate text so that when images are disabled the alt text will be seen instead. Thoughts?
Now there's gray rectangle clicking on which works, but no "Search" text.
(In reply to comment #2) > Now there's gray rectangle clicking on which works, but no "Search" text. Thus marking patch as reviewed.
Created attachment 10341 [details] Fix using javascript This fix adds javascript that tries to create an image using a data uri. If the image successfully loads with a height other than 0 then a class is added to the body that can be used to add the negative text indent that hides the label. If javascript is disabled the text indent will remain at 0 so the label will be visible. The only down side of this patch is if the browser doesn't support data uris then the search button will have the text 'Go' over the icon on browsers which have got images enabled. Would appreciate review of this as a solution.
Possibly fixed without relying on javascript - https://gerrit.wikimedia.org/r/4850 Waiting on MaxSem to confirm and close.
Still broken.
I think there is no ideal fix for this apart from damaging the design. By that I mean changing the search button from a search icon to the text 'search'/'go' Different mobile browsers disable images in different ways. I knocked up this page to demonstrate - http://jonrobson.me.uk/wikipedia/text-indent-test.html With images disabled on my browser I do not see the alt text of the first or second image. I consider that pretty bad and a fault of my browser. I see nothing for solution 3 but that is expected as I have no background image and a text-indent defined. If I remove the text indent as in solution 4, I see the label - however this solution requires javascript so I either display the text 'go' over the search icon for users with javascript disabled and images enabled or I show the text 'go' to users with javascript enabled and images disabled. Solution 5 although not showing any text shows a border showing it is a button. Google uses this and I think it is acceptable. On Nokia N95 I see the alt text of solution 1 and 2 and 3, 4 and 5 work the same as above. As a result on a Nokia N95 with images disabled the search button is readable. We can do one of solution 4 or 5 but I don't wish to spend more time on this problem as I don't think it is completely solvable....
Another option would be (if possible) for the php code to add a class imagesDisabled to the html tag for browsers which have images disabled. Styling can then do the rest. I'm not sure how possible this is...
Search button is disappearing in new navigation so closing.
