Page MenuHomePhabricator

Evaluate providing section collapsing to older browsers where we do not run JS
Closed, ResolvedPublic

Description

In T147338 we recognised 2 solutions which could achieve this goal

Checkbox hack

Owner: @phuedx
Link: https://gerrit.wikimedia.org/r/#/c/315512/
Pros:

  • No FOUC
  • CSS-only
    • Can be progressively enhanced to include remembering whether a section was toggled
  • Trivially simple to style, minimising the hit to top-loaded styles.
  • Toggling JavaScript code can be removed or drastically simplified.
  • Supports all Grade A and C browsers.

Cons:

  • A dramatic DOM structure change – we'll need to move section headings inside of section containers.
  • The simplicity of the styles comes at the cost of additional complexity in constructing the page.
  • As the name implies, it's a hack…
  • Accessiblity

Details / section tags ( as suggested by @Yair_rand )

Owner: @Jdlrobson
Link: http://jdlrobson.com/tmp/Trump.html
Caveats: The prototype collapses all section headings / not just the highest level one (easily fixed but something to be aware of)

Pros:

  • Section collapsing becomes available for certain non-JavaScript users (any which have intentionally disabled JS) and grade C browsers (potentially UC Mini running extreme mode)
  • Limited styling needed
  • JavaScript code for toggling JavaScript can be removed (unless we want to support mobile options open by default)
  • Gracefully degrades
  • IE6 will render the content with the HTML5 shim.
  • This is mostly accessible - in Chrome for example you can expand with enter key. Older versions however may experience issues.
  • Section collapsing is instantly available and usable even on 2G connections as no JS is required.

Cons:

  • Complex change in MobileFormatter - we'd need to wrap all sections and headings in a container
  • IE6 without JS will not render any content due to the way it handles new HTML5 elements.
  • Section collapsing will disappear for certain browsers that support JS. most notably Internet Explorer/Edge based phones.
    • another way at looking at this is we exert pressure on IE to adopt this standard. We are a big website. We have a chance to make the web better.
  • Some people may not like the markup
  • Will be hard to expand sections on tablet mode without resorting to JS. We'll likely to have the same problem that we are trying to solve but with tablets instead.

Do we want to explore these any further?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 18 2016, 9:19 PM

@bmansurov said:

#4 is too radical and doesn't offer anything more to #1.

I'm curious to why you found use of details/section tags radical and didn't find the checkbox hack radical?

Piotr had the suggestion that we could use the details/section tag as well as some JS - which sounds like a good approach to me as it ticks all boxes (accessibility, removes FOUC, solves this goal)
https://phabricator.wikimedia.org/T147338#2727047

@Jdlrobson just by looking at the cons of #4, I felt it was too much work compared to how simple #1 is.

We have been discussing adding semantic <section> tags for a while now, and this is just another use case that would benefit from doing so. We have code to do this for Parsoid output, and doing the same in MediaWiki should not be too hard, either. See T114072: <section> tags for MediaWiki sections.

@GWicke how would the use of <section> tags help this use case?

GWicke added a comment.EditedNov 3 2016, 1:29 AM

@Jdlrobson, they would make styling of sections (such as collapsing) via CSS a lot easier.

@GWicke styling sections themselves is not the problem. Although being able to wrap content in a <section> tag would be useful (since we already wrap them in a div in MobileFrontend), the hope is to use CSS to allow collapsing of the section. The section tag would not help here as it would still require JavaScript for collapsing to operate.

Jdlrobson closed this task as Resolved.Jun 6 2017, 11:08 PM
Jdlrobson claimed this task.

Doesn't seem like we want to explore this further but evaluation was completed and we decided not to pursue. https://phabricator.wikimedia.org/T147338#2729490