Add title attribute to opt-out link

The opt-out link was missing a tooltip which is important for
accessibility and to help people gain more context as to what it does.

Bug: T250093
Change-Id: Ie6cbaf5c941615d1662700415b8f1823987a563d

i18n/en.json

@@ -7,6 +7,7 @@
 	"prefs-vector-enable-vector-1-label": "Use Legacy Vector",
 	"prefs-vector-enable-vector-1-help": "Over the next few years, we will be gradually updating the Vector skin. Legacy Vector will allow you to view the old version of Vector (as of December 2019). To learn more about the updates, go to our [[mw:Reading/Web/Desktop_Improvements|project page]].",
 	"vector-opt-out": "Switch to old look",
+	"vector-opt-out-tooltip": "Change your settings to go back to the old look of the skin (legacy Vector)",
 	"vector.css": "/* All CSS here will be loaded for users of the Vector skin */",
 	"vector.js": "/* All JavaScript here will be loaded for users of the Vector skin */",
 	"vector-action-addsection": "Add topic",

i18n/qqq.json

@@ -18,6 +18,7 @@
 	"prefs-vector-enable-vector-1-label": "Label for the checkbox to force Legacy Vector operation accessible via Special:Preferences. When this checkbox is enabled, the December 2019 of Vector is used. When this checkbox is disabled, the actively developed version of Vector is used instead.",
 	"prefs-vector-enable-vector-1-help": "Detail explaining the operation of the prefs-vector-enable-vector-1-label checkbox.",
 	"vector-opt-out": "Text of link that takes the user to the Special:Preferences page so they can opt-out of the latest version of Vector and go back to legacy Vector.",
+	"vector-opt-out-tooltip": "Used as the tooltip for the Vector opt-out link",
 	"vector.css": "{{optional}}",
 	"vector.js": "{{optional}}",
 	"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",

includes/VectorTemplate.php

@@ -226,7 +226,8 @@ class VectorTemplate extends BaseTemplate {
 					false,
 					'mw-prefsection-rendering-skin-skin-prefs'
 				)->getLinkURL( 'wprov=' . self::OPT_OUT_LINK_TRACKING_CODE ),
-				'text' => $this->msg( 'vector-opt-out' )->text()
+				'text' => $this->msg( 'vector-opt-out' )->text(),
+				'title' => $this->msg( 'vector-opt-out-tooltip' )->text(),
 			];
 		}
 

includes/templates/Sidebar.mustache

@@ -18,7 +18,7 @@
 	{{#array-portals-first}}{{>Portal}}{{/array-portals-first}}
 	{{#data-emphasized-sidebar-action}}
 	<div class="vector-emphasized-sidebar-action">
-		<a class="vector-emphasized-sidebar-action-link" href="{{href}}">{{text}}</a>
+		<a class="vector-emphasized-sidebar-action-link" title="{{title}}" href="{{href}}">{{text}}</a>
 	</div>
 	{{/data-emphasized-sidebar-action}}
 	{{#array-portals-rest}}{{>Portal}}{{/array-portals-rest}}

stories/Sidebar.stories.data.js

@@ -23,7 +23,8 @@ export const SIDEBAR_DATA = {
 		'array-portals-first': PORTALS.navigation,
 		'data-emphasized-sidebar-action': {
 			href: '#',
-			text: 'Switch to old look'
+			text: 'Switch to old look',
+			title: 'Change your settings to go back to the old look of the skin (legacy Vector)'
 		},
 		'array-portals-rest': [
 			PORTALS.toolbox,