Re-implement and improve mw-jump links with pure CSS

* Improve their accessibility by giving both links
  a full label "Jump to x" and "Jump to y" instead
  of "Jump to: ", "x", "y".

  This also makes things much better for localisation, for which
  we generally discourage use of concatenation.

* Use pure CSS for the toggling of the visibility on focus,
  instead of relying on JavaScript. Especially given the
  JS comes form core's 'jquery.mw-jump' module, which is
  considered technical debt per T195256. Alternatively,
  that could be copied to vector.js, but pure CSS
  is possible, so why not.

* Use plain <a> links in the HTML instead of wrapped in a <div>.
  This solves the long-standing problem whereby the margin
  between #contentSub and #mw-content-text had to be awkwardly
  negated and overridden in core and on various to make sure that
  the wrapper itself would become visible as needed, in a way that
  has margin around this. This whole problem doesn't apply when
  simply using inline links that aren't part of the regular flow
  with .mixin-screen-reader-text. On focus, the individually
  focussed link appears in regular flow, without the need for
  any custom styles.

* This uses :not(:focus) to naturally make it render in the default
  way on focus, and visibibly hidden/clipped otherwise.
  This is supported in IE9+ and Android 2+.
  There is a way to make it work with CSS2 for IE7-8, by applying
  the mixin to '.mw-jump-link' only and then undoing all of
  'position', 'width', 'height', 'clip', and 'margin' on :focus.
  But I'm not sure that's worth it here. The fallback in IE7-8
  for not supporting ":not(:focus)" is that the accessibility
  link is simply visible always, which seems like a good fallback
  for accessibility, and doesn't hurt anything.

Bug: T195256
Change-Id: Icaadb290f692b3617688d32cbb66dfb007f1c82c

components/navigation.less

@@ -9,6 +9,10 @@
 	top: -9999px;
 }
 
+.mw-jump-link:not( :focus ) {
+	.mixin-screen-reader-text;
+}
+
 /* Head */
 #mw-page-base {
 	height: 5em;

i18n/en.json

@@ -17,5 +17,7 @@
 	"vector-view-history": "View history",
 	"vector-view-view": "Read",
 	"vector-view-viewsource": "View source",
+	"vector-jumptonavigation": "Jump to navigation",
+	"vector-jumptosearch": "Jump to search",
 	"vector-more-actions": "More"
 }

i18n/qqq.json

@@ -26,5 +26,7 @@
 	"vector-view-history": "Tab label in the Vector skin. See for example {{canonicalurl:Main_Page|useskin=vector}}\n{{Identical|View history}}",
 	"vector-view-view": "Tab label in the Vector skin (verb). See for example {{canonicalurl:Main_Page|useskin=vector}}.\n{{Identical|Read}}",
 	"vector-view-viewsource": "Tab label in the Vector skin.\n{{Identical|View source}}",
+	"vector-jumptonavigation": "Accessibility link for jumping to the navigation links. Visually hidden by default.\n\nSee also\n* {{mw-msg|Navigation}}",
+	"vector-jumptosearch": "Accessibility link for jumping to the site search. Visually hidden by default.\n\nSee also\n* {{mw-msg|Search}}",
 	"vector-more-actions": "Label in the Vector skin's menu for the less-important or rarer actions which are not shown as tabs (like moving the page, or for sysops deleting or protecting the page), as well as (for users with a narrow viewing window in their browser) the less-important tab actions which the user's browser is unable to fit in. {{Identical|More}}"
 }

includes/VectorTemplate.php

@@ -118,14 +118,12 @@ class VectorTemplate extends BaseTemplate {
 						$this->get( 'newtalk' )
 					);
 				}
+				// Keep this empty `div` for compatibility with gadgets and user scripts
+				// using this place to insert extra elements before.
+				echo Html::element( 'div', [ 'id' => 'jump-to-nav' ] );
 				?>
-				<div id="jump-to-nav" class="mw-jump">
+				<a class="mw-jump-link" href="#mw-head"><?php $this->msg( 'vector-jumptonavigation' ) ?></a>
-					<?php $this->msg( 'jumpto' ) ?>
+				<a class="mw-jump-link" href="#p-search"><?php $this->msg( 'vector-jumptosearch' ) ?></a>
-					<a href="#mw-head"><?php
-						$this->msg( 'jumptonavigation' )
-					?></a><?php $this->msg( 'comma-separator' ) ?>
-					<a href="#p-search"><?php $this->msg( 'jumptosearch' ) ?></a>
-				</div>
 				<?php
 				$this->html( 'bodycontent' );
 

print.less

@@ -205,10 +205,11 @@
 				font-size: 10pt;
 			}
 		}
+	}
 
-		.tocnumber {
+	.mw-jump-link,
-			display: none;
+	.toc .tocnumber {
-		}
+		display: none;
 	}
 
 	.printfooter {