From bdc8852a1c6ba92ccd0eb1747d8abf7ab82a5de6 Mon Sep 17 00:00:00 2001
From: Clare Ming <cming@wikimedia.org>
Date: Tue, 14 Sep 2021 16:56:54 -0600
Subject: [PATCH] Add aria-label to language dropdown menus

- Update portlet data.
- Update menu template.
- Add translatable strings.

Bug: T289523
Change-Id: I9b8f40843609c0192afdabd3117167b933155842
---
 i18n/en.json                     |  2 ++
 i18n/qqq.json                    |  2 ++
 includes/SkinVector.php          | 14 +++++++++-----
 includes/templates/Menu.mustache |  2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/i18n/en.json b/i18n/en.json
index fa3a734..4d9bdd9 100644
--- a/i18n/en.json
+++ b/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",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index d1c5fc4..7615751 100644
--- a/i18n/qqq.json
+++ b/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}}",
diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index efab57c..3e8262f 100644
--- a/includes/SkinVector.php
+++ b/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
diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 81c30a1..1e7c726 100644
--- a/includes/templates/Menu.mustache
+++ b/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}}