@ovasileva thoughts about the proposed labels above?

In T287494#7240155, @alexhollender wrote:

@ovasileva thoughts about the proposed labels above?

@alexhollender Look good to me! What are our capitalization rules?

@ovasileva On capitalization I remember we went for first letter capitalized, with exception of specific names who also got capitalized.

To add title attributes to the menu elements mentioned in the description, we can add them to the relevant templates directly or preprocess variables to be passed into the templates.

In the case of the hamburger menu, it's easy enough to add title="Main menu" directly to the label element in Header.mustache. Presumably this is the only menu using this template. If this is ok, that fixes 1/3 menu elements missing title attributes.

For the user icon and the ellipsis icon, the same menu template (Menu.mustache) renders that dropdown in addition to every other dropdown (i.e. ULS dropdown, language dropdown, More dropdown - basically any dropdown that has the down arrow icon appended). Since there is NOT a generic title attribute attached to the input element in Menu.mustache, we could just add title="More options" to the input tag and this will show up on hover for ALL the dropdown menus on the page. This means the user icon and the ellipsis icon will have to share the same title attribute along with all the other dropdowns. This is probably not the desired outcome.

If we want to customize the title attribute per dropdown, we will need to revamp Menu.mustache to accept a unique title attribute variable per dropdown menu instance. This route will be a more work than just adding the title attribute to the template markup directly.

If we want to customize the title attribute per dropdown, we will need to revamp Menu.mustache to accept a unique title attribute variable per dropdown menu instance. This route will be a more work than just adding the title attribute to the template markup directly.

If we're okay with the title attribute on the menu itself, this can be achieved by adding messages for: tooltip-p-cactions and tooltip-p-personal inside core, requiring no changes to the template.

The template outputs html-tooltip https://github.com/wikimedia/Vector/blob/master/includes/templates/Menu.mustache#L5
The value comes from Linker::tooltip( $id ) https://gerrit.wikimedia.org/g/mediawiki/core/+/3c5ef86bc0d82056929ada2287b4208a69420459/includes/skins/SkinMustache.php#60
which comes from https://gerrit.wikimedia.org/g/mediawiki/core/+/3c5ef86bc0d82056929ada2287b4208a69420459/includes/Linker.php#2280

Note presumably, we'll want to disable these tooltips for other skins so we might need skin-specific patches to disable hover behaviour where it's not wanted.

Following up above:

Applying

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 0ebacc7dde..021d17b61f 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -2,6 +2,7 @@
        "@metadata": {
                "authors": []
        },
+       "tooltip-p-cactions": "More more more",
        "sidebar": "\n* navigation\n** mainpage|mainpage-description\n** recentchanges-url|recentchanges\n** randompage-url|randompage\n** helppage|help-mediawiki\n* SEARCH\n* TOOLBOX\n* LANGUAGES",
        "tog-underline": "Link underlining:",
        "tog-hideminor": "Hide minor edits from recent changes",

makes a tooltip for the more menu (magic!).

Change 714790 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/core@master] Add custom tooltip messages for menu icons

https://gerrit.wikimedia.org/r/714790

Change 714793 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add title attributes to menu icons on hover

https://gerrit.wikimedia.org/r/714793

Change 714793 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add title attributes to menu icons on hover

https://gerrit.wikimedia.org/r/714793

Change 714790 merged by jenkins-bot:

[mediawiki/core@master] Add custom tooltip messages for menu icons

https://gerrit.wikimedia.org/r/714790

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Navigate to a page on Beta Cluster - i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein
✅ AC1: In modern Vector, hover over the user icon when logged-in to see "User menu".