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 [[ https://en.wikipedia.org/wiki/First_Battle_of_Dernancourt | here (barnstar) ]], [[ https://commons.wikimedia.org/wiki/File:Parque_estatal_Chugach,_Alaska,_Estados_Unidos,_2017-08-22,_DD_94.jpg | here (combination of badges on Commons) ]] or [[ https://en.wikipedia.org/w/index.php?title=Front_(disambiguation)&action=history | 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}
=== Prototypes
[[ http://patchdemo.wmflabs.org/wikis/3f2cebb066a5706519be6492a83a774f/w/ | DEMO 2 ]] (flex layout)
[[ http://patchdemo.wmflabs.org/wikis/b70f4202792d685831e5f957fb5953e1/w/ | 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:
{F32358514}
Coordinates & audio
{F32414947}
==== 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:
# Skin version: legacy / modern
# Media: screen ([[https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/3eea85aad9dd09a97fee4079d56338f95cae7319/resources/skins.vector.styles/legacy/layout.less#55|code]]) / print ([[https://gerrit.wikimedia.org/g/mediawiki/skins/Vector/+/3eea85aad9dd09a97fee4079d56338f95cae7319/resources/skins.vector.styles/common/print.less#52|code]])
# Window width: narrow (?px) / medium (?px) / wide (?px) -- heading wrapping into 2 or more lines
# Uncommon cases: works well with flaggedrevs? (T254666, [[https://hu.wikipedia.org/wiki/Sablon:Userinfo?safemode=1&useskin=vector|example page]] | [[https://hu.wikipedia.org/wiki/Sablon:Userinfo?useskin=vector|with site-local repositioning]]: [[https://hu.wikipedia.org/wiki/MediaWiki:Vector.js|Vector.js]])
# 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 |
| {F31727629} |
==== Applied, manual testing
| jawiki | hewiki | [[ https://commons.wikimedia.org/wiki/File:Palacio_de_Comunicaciones,_Plaza_de_Cibeles,_Madrid,_Espa%C3%B1a,_2017-05-18,_DD_32-34_HDR.jpg | commons (en) ]]
| {F31741817} | {F31741824} {F31741830} | {F31741844} (with local `padding` rule in place) {F31741884} (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 [[ https://en.wikipedia.org/wiki/MediaWiki_talk:Vector.css#%60.mw-body_.mw-indicators%60_rule_should_be_removed | 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
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ✅ | T248761#6804742 |
== QA Results - Prod
| **AC** | **Status** | **Details** |
| ----- | ----- | ----- |
| 1 | ❓ | T248761#6840883 |