Merge "Add aria-label to language dropdown menus"

i18n/en.json

@@ -11,7 +11,9 @@
 	"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-toggle-sidebar": "Toggle sidebar",
+	"vector-language-button-aria-label": "Change article language, available in {{PLURAL:$1|$1 language|$1 languages}}",
 	"vector-language-button-label": "{{PLURAL:$1|$1 language|$1 languages}}",
+	"vector-language-variant-switcher-label": "Change language variant",
 	"vector-action-addsection": "Add topic",
 	"vector-action-delete": "Delete",
 	"vector-action-move": "Move",

i18n/qqq.json

@@ -23,7 +23,9 @@
 	"vector.css": "{{optional}}",
 	"vector.js": "{{optional}}",
 	"vector-action-toggle-sidebar": "Accessibility label for the button that toggles the sidebar's visibility, as well as audible presentation for screen readers.",
+	"vector-language-button-aria-label": "Accessibility label for language button dropdown menu in modern Vector.\n* $1 - the count of languages available, supports plural",
 	"vector-language-button-label": "Label for language button in modern Vector.\n\nArguments:\n* $1 number of languages, supports plural",
+	"vector-language-variant-switcher-label": "Label for the language variant switcher.",
 	"vector-action-addsection": "Used in the Vector skin. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n{{Identical|Add topic}}",
 	"vector-action-delete": "Used in the Vector skin, as the name of a tab at the top of the page. See for example {{canonicalurl:Translating:MediaWiki|useskin=vector}}\n\n{{Identical|Delete}}",
 	"vector-action-move": "Used in the Vector skin, on the tabs at the top of the page. See for example {{canonicalurl:Talk:Main_Page|useskin=vector}}\n\n{{Identical|Move}}",

includes/SkinVector.php

@@ -532,12 +532,13 @@ class SkinVector extends SkinMustache {
 	}
 
 	/**
-	 * Returns ULS button label
+	 * Returns ULS button label within the context of the translated message taking a placeholder.
 	 *
+	 * @param string $message
 	 * @return string
 	 */
-	private function getULSLabel() {
-		$label = $this->msg( 'vector-language-button-label' )
+	private function getULSLabel( string $message ) {
+		$label = $this->msg( $message )
 			->numParams( count( $this->getLanguagesCached() ) )
 			->escaped();
 		return $label;
@@ -553,7 +554,7 @@ class SkinVector extends SkinMustache {
 			'id' => 'p-lang-btn-sticky-header',
 			'class' => 'mw-interlanguage-selector',
 			'is-quiet' => true,
-			'label' => $this->getULSLabel(),
+			'label' => $this->getULSLabel( 'vector-language-button-label' ),
 			'html-vector-button-icon' => Hooks::makeIcon( 'wikimedia-language' ),
 		];
 	}
@@ -566,7 +567,8 @@ class SkinVector extends SkinMustache {
 	private function getULSPortletData() {
 		$languageButtonData = [
 			'id' => 'p-lang-btn',
-			'label' => $this->getULSLabel(),
+			'label' => $this->getULSLabel( 'vector-language-button-label' ),
+			'aria-label' => $this->getULSLabel( 'vector-language-button-aria-label' ),
 			// ext.uls.interface attaches click handler to this selector.
 			'checkbox-class' => ' mw-interlanguage-selector ',
 			'html-vector-heading-icon' => Hooks::makeIcon( 'wikimedia-language' ),
@@ -681,6 +683,8 @@ class SkinVector extends SkinMustache {
 					$portletData['label'] = $item['text'];
 				}
 			}
+			// T289523 Add aria-label data to the language variant switcher.
+			$portletData['aria-label'] = $this->msg( 'vector-language-variant-switcher-label' );
 		}
 
 		// T287494 We use tooltip messages to provide title attributes on hover over certain menu icons. For modern

includes/templates/Menu.mustache

@@ -12,7 +12,7 @@
 		data-event-name="ui.dropdown-{{id}}"
 		class="{{#checkbox-class}}{{.}}{{/checkbox-class}} vector-menu-checkbox" aria-labelledby="{{id}}-label" />
 	{{/is-dropdown}}
-	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}} {{^is-legacy}}aria-hidden="true"{{/is-legacy}}>
+	<h3 id="{{id}}-label" aria-label="{{aria-label}}" {{#heading-class}}class="{{.}}"{{/heading-class}} {{^is-legacy}}aria-hidden="true"{{/is-legacy}}>
 		{{{html-vector-heading-icon}}}
 		<span>{{label}}</span>
 		{{#is-dropdown}}