Page MenuHomePhabricator

Mobile version of Wikipedia requires JavaScript to view sections
Closed, ResolvedPublic

Description

Currently, on en.m.wikipedia.org, the sections are being hidden by setting display: none in the CSS, then having JavaScript buttons to show the content. This means if you are viewing the page on a mobile device that doesn't support JavaScript, you can't view the sections.

Instead, it might be better to remove the display: none from the CSS, and have the JavaScript hide (and unhide) the content if JavaScript is available. That means it'll be accessible even without JavaScript.

Steps to replicate.

  1. Open your favourite browser.
  2. Turn off JavaScript.
  3. Go to http://en.m.wikipedia.org/ and go to an article.
  4. Enjoy not being able to read any of the sections.

Version: unspecified
Severity: normal

Details

Reference
bz34025

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 12:09 AM
bzimport set Reference to bz34025.
bzimport added a subscriber: Unknown Object (MLST).

preilly wrote:

This is NOT the case.

If you have a device that doesn't support Javascript we don't collapse the sections.
For example: If I set my user-agent to "Yahoo Slurp e.g., Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)" and request: http://en.m.wikipedia.org/wiki/Buffalo_nickel
I get a page without the sections collapsed.

I suppose that we could tweak this to only collapse the sections if we detect javascript as being enabled.

— Patrick

It is generally possible to disable JavaScript in browsers that support it, so I'd recommend only collapsing if JS is on. (This can be done by adding a CSS rule in a <script> block pretty easily I think)

This should be as simple as adding a bit of javascript that adds to the body tag a 'jsEnabled' class.

Then adding the following css rules:
button.show {
display: none;
}

.jsEnabled button.show {
display: inline-block;
}

.jsEnabled .content_block,
.jsEnabled .section_anchors,
button.section_heading.hide {
display: none;
}