From 5a951e21596d690fc5605d3c4286136c9935d789 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Mon, 26 Sep 2022 10:04:41 -0400
Subject: [PATCH] Modify Vector 2022 skip-links

- Changes the "skip to content" link to point to "#bodyContent"
  instead of "#content".
- Adds a `aria-labelledby` attribute to #bodyContent.
- Changes the table of contents "back to top" link to
  point to "#" instead of "#top-page".
- Removes "#top" link as it appeared unused.
- Updates Jest snapshots.

Bug: T312818
Change-Id: I86443066d45c818d6f137d70ebe36798eba66f13
---
 includes/templates/TableOfContents.mustache           | 2 +-
 includes/templates/skin.mustache                      | 6 ++----
 tests/jest/__snapshots__/tableOfContents.test.js.snap | 6 +++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/includes/templates/TableOfContents.mustache b/includes/templates/TableOfContents.mustache
index 4e845afb..8aa56dab 100644
--- a/includes/templates/TableOfContents.mustache
+++ b/includes/templates/TableOfContents.mustache
@@ -10,7 +10,7 @@
 		{{#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">
+			<a href="#" class="sidebar-toc-link">
 				<div class="sidebar-toc-text">{{ msg-vector-toc-beginning }}</div>
 			</a>
 		</li>
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 13538ef8..80d7f7bb 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -31,8 +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>
+	<a class="mw-jump-link" href="#bodyContent">{{msg-vector-jumptocontent}}</a>
 	<div class="mw-page-container-inner">
 		<input
 			type="checkbox"
@@ -53,10 +52,9 @@
 		<div class="mw-content-container">
 			{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 			<main id="content" class="mw-body" role="main">
-				<a id="top"></a>
 				{{>ContentHeader}}
 				{{>ArticleToolbar}}
-				<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
+				<div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container>
 					{{>ContentSubheader}}
 					{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
 					{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
diff --git a/tests/jest/__snapshots__/tableOfContents.test.js.snap b/tests/jest/__snapshots__/tableOfContents.test.js.snap
index 2132db21..ae38f459 100644
--- a/tests/jest/__snapshots__/tableOfContents.test.js.snap
+++ b/tests/jest/__snapshots__/tableOfContents.test.js.snap
@@ -16,7 +16,7 @@ exports[`Table of contents re-rendering re-renders toc when wikipage.tableOfCont
 	</div>
 	<ul class=\\"sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
 		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
-			<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
+			<a href=\\"#\\" class=\\"sidebar-toc-link\\">
 				<div class=\\"sidebar-toc-text\\">Beginning</div>
 			</a>
 		</li>
@@ -88,7 +88,7 @@ exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\`
 	</div>
 	<ul class=\\"sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
 		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
-			<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
+			<a href=\\"#\\" class=\\"sidebar-toc-link\\">
 				<div class=\\"sidebar-toc-text\\">Beginning</div>
 			</a>
 		</li>
@@ -151,7 +151,7 @@ exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\`
 	</div>
 	<ul class=\\"sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
 		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
-			<a href=\\"#top-page\\" class=\\"sidebar-toc-link\\">
+			<a href=\\"#\\" class=\\"sidebar-toc-link\\">
 				<div class=\\"sidebar-toc-text\\">Beginning</div>
 			</a>
 		</li>