Merge "Table of contents links to beginning of article"

i18n/en.json

@@ -38,6 +38,7 @@
 	"vector-searchsuggest-containing": "Search for pages containing <strong class=\"wvui-typeahead-search__suggestions__footer__text__query\">$1</strong>",
 	"vector-intro-page": "Help:Introduction",
 	"vector-toc-heading": "Contents",
+	"vector-toc-beginning": "Beginning",
 	"vector-anon-user-menu-pages": "Pages for logged out editors",
 	"vector-anon-user-menu-pages-learn": "learn more",
 	"vector-anon-user-menu-pages-label": "Learn more about editing",

i18n/qqq.json

@@ -53,6 +53,7 @@
 	"vector-searchsuggest-containing": "Label used in the special item of the search suggestions list which gives the user an option to perform a full text search for the term. Used in the WVUI typeahead search component.",
 	"vector-intro-page": "Introduction or tutorial page for the wiki. Typically either Project/Help:Introduction ([[d:Q3945]]) or Project/Help:Tutorial ([[d:Q915263]]).",
 	"vector-toc-heading": "Heading of table of contents\n\n{{Identical|Content}}",
+	"vector-toc-beginning": "Shown in the table of contents: Text of link to the beginning of the article.",
 	"vector-anon-user-menu-pages": "Label describing the anon editor links in the anon user menu",
 	"vector-anon-user-menu-pages-learn": "Lowercase text of link that goes to Help:Introduction and helps the user learn more about editing",
 	"vector-anon-user-menu-pages-label": "Accessible version of 'vector-anon-user-menu-pages' link text, prompts user to learn more about editing",

includes/SkinVector.php

@@ -622,6 +622,9 @@ abstract class SkinVector extends SkinMustache {
 		}
 
 		return array_merge( $tocData, [
+			'is-vector-toc-beginning-enabled' => $this->getConfig()->get(
+				'VectorTableOfContentsBeginning'
+			),
 			'vector-is-collapse-sections-enabled' =>
 				$tocData[ 'number-section-count'] >= $this->getConfig()->get(
 					'VectorTableOfContentsCollapseAtCount'

includes/templates/TableOfContents.mustache

@@ -3,6 +3,14 @@
 		<h2 class="sidebar-toc-title" aria-hidden="true">{{ msg-vector-toc-heading }}</h2>
 	</div>
 	<ul id="table-of-contents">
+		{{#is-vector-toc-beginning-enabled}}
+		<li id="toc-mw-content-text"
+			class="sidebar-toc-list-item sidebar-toc-level-1">
+			<a href="#top-page" class="sidebar-toc-link">
+				<div class="sidebar-toc-text">{{ msg-vector-toc-beginning }}</div>
+			</a>
+		</li>
+		{{/is-vector-toc-beginning-enabled}}
 		{{#array-sections}}
 		{{>TableOfContents__line}}
 		{{/array-sections}}

includes/templates/skin.mustache

@@ -31,6 +31,7 @@
 	object data-footer for footer template partial. see Footer.mustache for documentation.
 }}
 <div class="mw-page-container">
+	<span id="top-page"></span>
 	<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
 	<div class="mw-page-container-inner {{#data-toc}} vector-toc-visible{{/data-toc}}">
 

skin.json

@@ -61,6 +61,7 @@
 						"vector-main-menu-tooltip",
 						"vector-jumptosearch",
 						"vector-jumptocontent",
+						"vector-toc-beginning",
 						"vector-toc-heading",
 						"search",
 						"searchbutton",
@@ -499,6 +500,10 @@
 			},
 			"description": "@var When `VectorTableOfContents` is enabled, the sticky table of contents is shown."
 		},
+		"VectorTableOfContentsBeginning": {
+			"value": true,
+			"description": "@var boolean Temporary feature flag that controls link to beginning of article."
+		},
 		"VectorTableOfContentsCollapseAtCount": {
 			"value": 20,
 			"description": "@var When `VectorTableOfContents` is enabled, the minimum number of headings required to collapse all headings in the sticky table of contents by default."

tests/jest/__snapshots__/tableOfContents.test.js.snap

@@ -6,6 +6,11 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is false
 		<h2 class=\\"sidebar-toc-title\\" aria-hidden=\\"true\\">Contents</h2>
 	</div>
 	<ul id=\\"table-of-contents\\">
+		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
+			<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
+				<div class=\\"sidebar-toc-text\\">Beginning</div>
+			</a>
+		</li>
 <li id=\\"toc-foo\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
 	<a class=\\"sidebar-toc-link\\" href=\\"#foo\\">
 		<div class=\\"sidebar-toc-text\\">
@@ -58,6 +63,11 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is true
 		<h2 class=\\"sidebar-toc-title\\" aria-hidden=\\"true\\">Contents</h2>
 	</div>
 	<ul id=\\"table-of-contents\\">
+		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
+			<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
+				<div class=\\"sidebar-toc-text\\">Beginning</div>
+			</a>
+		</li>
 <li id=\\"toc-foo\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
 	<a class=\\"sidebar-toc-link\\" href=\\"#foo\\">
 		<div class=\\"sidebar-toc-text\\">

tests/jest/tableOfContents.test.js

@@ -18,6 +18,8 @@ const onToggleClick = jest.fn();
  */
 function render( templateProps = {} ) {
 	const templateData = Object.assign( {
+		'is-vector-toc-beginning-enabled': true,
+		'msg-vector-toc-beginning': 'Beginning',
 		'msg-vector-toc-heading': 'Contents',
 		'vector-is-collapse-sections-enabled': false,
 		'array-sections': [ {