Page MenuHomePhabricator

[modern Vector only] Move indicators underneath firstHeading
Closed, ResolvedPublic5 Estimated Story PointsSpike

Description

In preparation fro moving the languages, the first heading should come as far up as possible in DOM on new Vector. For now, Old Vector will remain the same and this will be the subject of a new task.

Indicators as shown here (barnstar), here (combination of badges on Commons) or here (helplink) should come after firstHeading as it's more descriptive and clearer to, users of screenreader software.
Imagine hearing the article title and then the information that it's a featured article.

Also consider subtask T254666: Indicators are unclickable on huwiki

Prototypes

DEMO 2 (flex layout)
DEMO 3 (float layout)
Q: Is there any benefit to using float instead of flex or the opposite?

Proposal

Move indicators directly under #firstHeading to

  • improve screenreader experience
  • also let indicators stay on same place close to heading underline, wiith multiline headings

Design

Before and after:


Coordinates & audio

Note

Currently, the right floated indicators in variable width are letting headings break before its div.
We need to apply a layout flexible solution, that takes the variable width of both elements into account.

One minor possible side-effect could be that excerpts of Wikipedia articles in search engine results would include the indicators in the excerpt in the sequence:

  1. first heading
  2. indicators “This is a featured article”
  3. prebodyhtml
  4. siteSub

instead of

  1. first heading
  2. prebodyhtml
  3. siteSub
Test matrix

Variations:

  1. Skin version: legacy / modern
  2. Media: screen (code) / print (code)
  3. Window width: narrow (?px) / medium (?px) / wide (?px) -- heading wrapping into 2 or more lines
  4. Uncommon cases: works well with flaggedrevs? (T254666, example page | with site-local repositioning: Vector.js)
  5. Caching: new HTML with old CSS (for 30 min?), old HTML with new CSS (for 4-7-14 days)
Local Testing
Test IE 8 with changed DOM
Applied, manual testing
jawikihewikicommons (en)
(with local padding rule in place)
(w removed local override)

QA

Test page: https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein or https://de.wikipedia.org/wiki/Rindfleischetikettierungs%C3%BCberwachungsaufgaben%C3%BCbertragungsgesetz (for overlong title)

  • The indicators appear on the same position on legacy Vector
  • The indicators appear on the same position on modern Vector

Note,

  • it's acceptable if there's a 1px difference
  • there's a local CSS override on enwiki adding a padding-top to position indicators, that's good to be removed with this change. Request captured on Vector.css talk page.

Sign off steps

  • Discuss whether we want to do this for old Vector (and why) and create a new task if necessary

QA Results - Beta

ACStatusDetails
1T248761#6804742

QA Results - Prod

ACStatusDetails
1T248761#6842520

Related Objects

StatusSubtypeAssignedTask
ResolvedGoalovasileva
ResolvedJdlrobson
Resolvedovasileva
ResolvedSpikeovasileva
ResolvedSpikephuedx
Resolvedovasileva
ResolvedSpikeVolker_E
ResolvedSpikeovasileva
Resolvedovasileva
ResolvedBUG REPORTmatmarex
Resolvedovasileva
ResolvedJdlrobson
Resolvedphuedx
Resolvednray
ResolvedMayakp.wiki
ResolvedMayakp.wiki
Stalledovasileva
OpenNone
ResolvedEdtadros
OpenNone
OpenNone
Resolvedovasileva
Resolvedovasileva
OpenNone
Resolvedovasileva
Resolvedovasileva
ResolvedSpikeovasileva
OpenBUG REPORTNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 605300 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [WIP] Move indicators underneath firstHeading

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

Change 607412 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] Move indicators underneath firstHeading (float layout)

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

Is there any benefit to using float instead of flex or the opposite?

Flexbox doesn't seem acceptable to me from current browser support matrix.
Even in IE 11 the support is more than wonky. IE 9 & 10 would be put into graceful degradation position instead of solid support or progressive enhancement, which is our preferred approach with CSS.

@Demian In both of your demos, float and flexbox the indicator shrink with overlong titles.

@Demian In both of your demos, float and flexbox the indicator shrink with overlong titles.

Please open DevTools and observe the intentionally added <span style="font-size:.5em">🌟</span>.
That was done as part of a test for Tacsipacsi. It's deliberately tiny, not shrinking. For convenience now I've returned it to the same size as on other pages.

Dropping this back to the backlog for now as it's not a priority right now (no updates in over a month).

@Jdlrobson I think this task is about DOM order rather than visual presentation, but just wanted to note that as part of the language switcher work we will need to shift the indicators below the article title line to make room for the language switcher:

currently
updated

So if this issue doesn’t exist in new Vector, probably it should be left untouched in legacy Vector not only visually, but also at DOM level—search engine optimization doesn’t apply in a soon-to-be-retired skin, and it turned out that it’s impossible to change the DOM with zero visual difference (which is the promise of legacy Vector).

ovasileva moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
Jdlrobson renamed this task from Move indicators underneath firstHeading to [modern Vector only] Move indicators underneath firstHeading.Sep 1 2020, 10:11 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed a project: Patch-For-Review.

@Tacsipacsi I think for now we can scope this to the new version of Vector to manage the risk.

Team: this is back on the agenda now and a necessary precursor for the next phases of the design where we'll be moving the languages.

ovasileva raised the priority of this task from Medium to High.Jan 13 2021, 5:08 PM

@Krinkle thanks for the Gent example. The spoken article placement is very intriguing. Not only is that not an indicator, it's actually inserted inside the <h1 id="firstHeading"> via Javascript. These kinds of gadgets are sure to break (but no irreparably) so making this change to new Vector only, where these kinds of issues can be spotted & fixed by our early-adopter wikis, ( as @Jdlrobson mentions above ) is certainly a more prudent course of action.

I think the desired outcome (for new Vector only) in the nlwiki example would be something like this screenshot (again, not really possible without modifying the spoken article gadget and appending it to a different DOM element):

Change 657056 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] [POC] Wrap #firstHeading and indicators in #bodyContent

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

Change 657063 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] [POC] move tagline above #bodyContent

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

Change 657056 abandoned by Jdrewniak:
[mediawiki/skins/Vector@master] [POC] Wrap #firstHeading and indicators in #bodyContent

Reason:
Too complicated, https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /657063 is a simpler approach.

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

Question from standup: if we move the indicators and ask individual communities to move their coordinates below the line where appropriate, do we run the risk of indicators overlapping with coordinates?

Ex: https://fr.wikipedia.org/wiki/Paris

Is there any way to tell the difference between old and new Vector skins in CSS? I mean, both variants seem to use the same skin-vector class in the <body> element, but there might arise a need to address specific tweaks to either one. I'm thinking of the From Wikipedia, the free encyclopedia text (a.k.a. sitesub?) which is not present in certain projects, e.g. plwiki. A prominent blank space is created beneath the first heading after this change, as you can see in T248761#6757107, so restoring it (only on the new Vector skin) could actually help.

Also, certain local changes might need to be carried out to conform with the new placements of indicators. For instance, the disambiguation bar shown below ("Ten artykuł dotyczy miasta (...)") should take full width after positioning the coordinates below the title bar.

Is there any way to tell the difference between old and new Vector skins in CSS?

Yes, body.skin-vector-legacy is old Vector on Wikimedia wikis. (Unfortunately older versions of Vector don’t include this class, so one cannot use this class on any wiki out there, but Wikimedia wikis all use a version recent enough to distinguish old and new Vector.)

@Krinkle thanks for the Gent example. The spoken article placement is very intriguing. Not only is that not an indicator, it's actually inserted inside the <h1 id="firstHeading"> via Javascript. […]

This was the status quo until a few years ago, when this common site script was embraced by MediaWiki through introduction of a native "page status indicators" feature. The "spoken" widget is the only one remamining (to my knowledge) that doesn't yet use a native indicator, which is due to an unresolved TMH bug (T230471).

There are, however, numerous indicators that are as wide or wider than it. Including in the above screenshot - the "coordinates" widget uses a native indicator, for example.

Right now, native indicators render in the same spot as things that JavaScript prepends to firstHeading. However, I don't think you need to worry about supporting that. It would be trivial to update the site scripts to prepend to the indicators wrapper element instead. Communities simply haven't done this because indicators were (naturally) introduced to be in the same place as they used to be via JS, and thus there wasn't a need to change anything because they naturally render in the same place, and effort is instead put toward migrating templates to use it. However as Vector might make them appear elsewhere, it would imho be trivial and uncontroversial to simply update those scripst to prepend them inside the indicator wrapper so that they will move along.

Alternatively, we can invest in fixing T230471 and then communities can just get rid of these remaining scripts entirely :). Either way, I don't think we need to get distracted by the particularities of how the widget is inserted, but rather focus more generallly on wide and interactive indicators.

@Krinkle good to know. By placing indicators on the line below the title, I think the new design gives them more space. Instead of dealing with a potentially long title, the indicators will only have to deal with the small and sometimes non-existent tagline (.i.e siteSub).

Though as @PeterBowman mentions, for wikis without a tagline, this might look a bit visually imbalanced. Adding the tagline back in on these wikis is certainly one way to go (not sure if @alexhollender has any thoughts on this).

Given all that, I’m proposing the following:

  1. Move #siteSub (i.e. tagline) outside of .mw-body-content:

  1. Give .mw-body a flexbox layout:

This would result in basically the whole page content being a flex-child. I’m not sure if this would have a negative performance impact, but if it does, we could try an alternative approach: We could add a wrapper element to hold just #firstHeading #siteSub and .mw-indicators (and eventually the language selector) since those items are the ones benefiting from the flexbox layout. This isn't my favoured option since wrapper elements add complexity to the layout, but I could be convinced otherwise.

Other things to watch out for with a flex-box layout are that #siteNotice (banners) would also become a flex-child and need to always be 100% width. And in terms of flex box fallbacks, I think we can get #siteSub and .mw-indicators on one line using inline-block in that situation.

  1. Give .mw-body a flexbox layout:

Flexbox doesn't seem acceptable to me from current browser support matrix.
Even in IE 11 the support is more than wonky. IE 9 & 10 would be put into graceful degradation position instead of solid support or progressive enhancement, which is our preferred approach with CSS.

I don’t think anything has changed since June, we still have IE11 as Grade A and IE9/10 as Grade C.

A lot has changed since Volker's comment:

Note: We can provide satisfactory fallbacks for browsers without flexbox by using CSS @support queries. I think we should do that here regardless.

Okay, thanks for the info. I think it’s worth made explicit, since the last update on this very task was that flexbox shouldn’t be used.

So I tried implementing the flexbox approach I suggested above, but when taking into account @Jdlrobson's work for the language selector https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/621084 I realized that the flex box approach is actually more complicated and more of a maintenance burden than a floated layout.

The reasons I think the flexbox approach is complicated for this scenario is that:

  1. The underline beneath the page title is hard to implement if the title is a flex-child. We could do something with pseudo-elements and absolute positioning, but that's complicated. We could also add more wrapper elements for just that row, but that also adds complexity and limits what we can do on narrow resolutions.
  2. At lower resolutions, the flexbox layout pushes the language selector onto the second line, before the tagline. This seems undesirable from a design perspective and can have unpredictable side-effects.

I made a codepen comparing the two approaches out of curiosity:
flexbox: https://codepen.io/j4n/full/abmrzoR
floats: https://codepen.io/j4n/full/wvzbBzJ

and in the end I think the simplest solution is just to build off of Jon's patch :)

Change 657063 abandoned by Jdrewniak:
[mediawiki/skins/Vector@master] Create new .mw-body-header <header> element.

Reason:

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

Change 657891 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Create .mw-body-header element for body content

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

Change 607412 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [POC] Move indicators underneath firstHeading (float layout)

Reason:
This has now been done as part of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /657891 however we are only touching the new modern version.

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

Change 605300 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [POC] Move indicators underneath firstHeading

Reason:
This has now been done as part of https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /657891 however we are only touching the new modern version.

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

Change 657891 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Create .mw-body-header element for body content

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

Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ❓ Need more info
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Test page: https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein or https://de.wikipedia.org/wiki/Rindfleischetikettierungs%C3%BCberwachungsaufgaben%C3%BCbertragungsgesetz (for overlong title)

❓ AC1: The indicators appear on the same position on legacy Vector and moden Vector

Legacy VectorModern Vector

@Jdrewniak, I read through the comments and I'm not sure if the decision was made to place the indicators on the same line as the tagline. Right now they are on the same line as the page title and share space with the language selector. Let me know if the screenshots above are as expected.

Per our discussion in standup, the indicators should be below the line.

Change 661520 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/Vector@master] Place indicators under page title

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

Change 661520 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Place indicators under page title

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Test page: https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein or https://de.wikipedia.org/wiki/Rindfleischetikettierungs%C3%BCberwachungsaufgaben%C3%BCbertragungsgesetz (for an overlong title)

✅ AC1: The indicators appear on the title line in Legacy Vector and the line below on modern Vector

Legacy VectorModern Vector

Test Result - Prod

Status: ❓ Need More Info
Environment: enwiki, dewiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Test page: https://en.wikipedia.org/wiki/Albert_Einstein and https://de.wikipedia.org/wiki/Rindfleischetikettierungs%C3%BCberwachungsaufgaben%C3%BCbertragungsgesetz (for an overlong title)

❌ AC1: The indicators appear on the title line in Legacy Vector and the line below on modern Vector
The indicators for Modern Vector appear in-line with the title.

Legacy VectorModern Vector

@Jdrewniak now the indicators for both Vector versions both appear in-line with the title. T248761#6840883

Is this as expected in production vs beta? Let me know if you consider this a pass and I'll update the acceptance criteria.

@Edtadros sorry for the confusion. This feature is still behind a feature flag, which is currently disabled in production. I think the beta validation is enough for QA for now. We're only going to enable this when the language button is ready.

Per discussion in standup, we will test this with the main task.