The first heading should come as far up as possible in DOM on **both new and old Vector.**
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}
[[http://patchdemo.wmflabs.org/wikis/9f537e8d1382eb154d1cb7e13f81df6b/w/index.php/Pagewithlongtitle_multipletimes_pagewithlongtitle_pagewithlongtitle?useskinversion=2|DEMO for huwiki]], [[http://patchdemo.wmflabs.org/wikis/9f537e8d1382eb154d1cb7e13f81df6b/w/index.php/Pagewithlongtitle_multipletimes_pagewithlongtitle_pagewithlongtitle?useskinversion=2&safemode=1|DEMO for all wikis]]
=== Proposal
Move indicators directly under `#firstHeading` to
- improve screenreader experience
- also let indicators stay on same place close to heading underline, wiith multiline headings
==== 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
[] 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 ]].