feat(menu): ✨ add accesskey hint to menu items

resources/skins.citizen.scripts/dropdown.js

@@ -8,6 +8,8 @@ const
 	DROPDOWN_SUMMARY_SELECTOR = '.citizen-dropdown-summary',
 	DROPDOWN_TARGET_SELECTOR = '.citizen-menu__card';
 
+const isPointerDevice = window.matchMedia( '(hover: hover) and (pointer: fine)' ).matches;
+
 /**
  * Represents a Dropdown menu with enhanced functionality.
  * This class handles the behavior of a dropdown menu, including dismissing the menu when clicking outside,
@@ -98,11 +100,26 @@ class Dropdown {
 		}
 	}
 
+	addKeyhint() {
+		if ( !isPointerDevice ) {
+			return;
+		}
+
+		const links = this.target.querySelectorAll( '.mw-list-item > a[accesskey]' );
+		links.forEach( ( link ) => {
+			const keyhint = document.createElement( 'span' );
+			keyhint.classList.add( 'citizen-keyboard-hint-key' );
+			keyhint.innerText = window.jQuery.fn.updateTooltipAccessKeys.getAccessKeyPrefix() + link.getAttribute( 'accesskey' );
+			link.append( keyhint );
+		} );
+	}
+
 	init() {
 		this.details.addEventListener( 'toggle', this.onDetailsToggle );
 		// T295085: Close all dropdown menus when page is unloaded to prevent them
 		// from being open when navigating back to a page.
 		window.addEventListener( 'beforeunload', () => this.dismiss );
+		this.addKeyhint();
 	}
 }
 

resources/skins.citizen.styles/components/KeyboardHint.less

@@ -14,6 +14,12 @@
 	}
 
 	&-key {
+		font-weight: var( --font-weight-normal );
 		color: var( --color-subtle );
 	}
 }
+
+/* Align keyhint to the right */
+.citizen-menu .mw-list-item a > span:has( + .citizen-keyboard-hint-key ) {
+	flex-grow: 1;
+}

resources/skins.citizen.styles/components/UserInfo.less

@@ -22,6 +22,10 @@
 		flex-wrap: wrap;
 		gap: var( --space-xs );
 		align-items: baseline;
+
+		&.citizen-keyboard-hint-key {
+			display: none;
+		}
 	}
 
 	#pt-tmpuserpage-2 > span {

templates/Menu.mustache

@@ -1,4 +1,9 @@
-<nav id="{{id}}" class="citizen-menu{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-userlangattributes}}}>
+<nav
+	id="{{id}}"
+	class="citizen-menu{{#class}} {{.}}{{/class}}"
+	{{{html-tooltip}}}
+	{{{html-userlangattributes}}}
+>
 	{{#label}}
 	<div class="citizen-menu__heading{{#label-class}} {{.}}{{/label-class}}">
 		{{{.}}}