Add title attributes to menu icons on hover

- Add title attribute to Header template for hamburger icon.
- Override tooltip for user links menu icon for anon users.
- Make sure tooltips are empty for legacy version.
- Add translatable strings for new tooltip, title.

Bug: T287494
Change-Id: I84ce6a1eb2a37eb9ea71a40c565c059d156a44ba

i18n/en.json

@@ -30,5 +30,7 @@
 	"vector-search-loader": "Loading search suggestions",
 	"vector-anon-user-menu-pages": "Pages for logged out editors",
 	"vector-anon-user-menu-pages-learn": "learn more",
-	"vector-personal-more-label": "User links"
+	"vector-personal-more-label": "User links",
+	"vector-main-menu-tooltip": "Main menu",
+	"tooltip-vector-anon-user-menu-title": "More options"
 }

i18n/qqq.json

@@ -42,5 +42,7 @@
 	"vector-search-loader": "Text to display below search input while the search suggestion module is loading",
 	"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-personal-more-label": "Label describing the user links next to the user links dropdown menu."
+	"vector-personal-more-label": "Label describing the user links next to the user links dropdown menu.",
+	"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
+	"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."
 }

includes/SkinVector.php

@@ -603,6 +603,20 @@ class SkinVector extends SkinMustache {
 			}
 		}
 
+		// T287494 We use tooltip messages to provide title attributes on hover over certain menu icons. For modern
+		// Vector, the "tooltip-p-personal" key is set to "User menu" which is appropriate for the user icon (dropdown
+		// indicator for user links menu) for logged-in users. This overrides the tooltip for the user links menu icon
+		// which is an ellipsis for anonymous users.
+		if ( $label === 'user-menu' && !$this->isLegacy() && !$this->loggedin ) {
+			$portletData['html-tooltip'] = Linker::tooltip( 'vector-anon-user-menu-title' );
+		}
+
+		// Set tooltip to empty string for the personal menu for both logged-in and logged-out users to avoid showing
+		// the tooltip for legacy version.
+		if ( $label === 'personal' && $this->isLegacy() ) {
+			$portletData['html-tooltip'] = '';
+		}
+
 		return $portletData + [
 			'is-dropdown' => $type === self::MENU_TYPE_DROPDOWN,
 		];

includes/templates/Header.mustache

@@ -6,7 +6,8 @@
 		role="button"
 		aria-controls="mw-panel"
 		data-event-name="ui.sidebar"
-		tabindex="0">
+		tabindex="0"
+		title="{{msg-vector-main-menu-tooltip}}">
 		{{msg-vector-action-toggle-sidebar}}
 	</label>
 	{{>Logo}}

includes/templates/skin.mustache

@@ -27,6 +27,7 @@
 	boolean sidebar-visible For users that want to see the sidebar on initial render, this should be
 	  true.
 	string msg-vector-action-toggle-sidebar The label used by the sidebar button.
+	string msg-vector-main-menu-tooltip The title attribute for the main menu icon.
 	object data-portlets-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
 }}

skin.json

@@ -42,6 +42,7 @@
 						"vector-opt-out",
 						"navigation-heading",
 						"vector-action-toggle-sidebar",
+						"vector-main-menu-tooltip",
 						"vector-jumptonavigation",
 						"vector-jumptosearch",
 						"vector-jumptocontent",