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

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">
-					<?php $this->msg( 'jumpto' ) ?>
-					<a href="#mw-head"><?php
-						$this->msg( 'jumptonavigation' )
-					?></a><?php $this->msg( 'comma-separator' ) ?>
-					<a href="#p-search"><?php $this->msg( 'jumptosearch' ) ?></a>
-				</div>
+				<a class="mw-jump-link" href="#mw-head"><?php $this->msg( 'vector-jumptonavigation' ) ?></a>
+				<a class="mw-jump-link" href="#p-search"><?php $this->msg( 'vector-jumptosearch' ) ?></a>
 				<?php
 				$this->html( 'bodycontent' );
 

print.less

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