From 467d994123c4a5aa8e23260fb5e460a958a5822a Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Mon, 6 Jun 2022 17:00:38 -0500
Subject: [PATCH] Follow-up: Update menu label elements

- Update the modern menu template to avoid using aria-hidden on the `label` element, and avoid using a `label` element when no checkbox is present.
- Revert legacy menu template to use h3 elements


Bug: T301051
Change-Id: I6ab10e35f0d67d70877e55cca5a512c2af4cb972
---
 includes/templates/Menu.mustache        | 17 +++++++----------
 includes/templates/legacy/Menu.mustache | 11 ++++++++++-
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 234cba44..8ab35c44 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -4,10 +4,9 @@
 
 <div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
 	{{!
-		Dropdown menus use the checkbox hack and require `input` and `label` elements
-		The accessible label is applied to the `input` which is semantically a button
-		The `label` element is used as a visual button and is hidden from screenreaders
-		to reduce verbosity, as it's contents are already used or overridden in the `input` element
+		Dropdown menus use the checkbox hack and require `input` and `label` elements.
+		`aria-label` is applied to the `input` which is semantically a button.
+		The `label` element is used as a visual button.
 	}}
 	{{#is-dropdown}}
 	<input type="checkbox"
@@ -17,28 +16,26 @@
 		data-event-name="ui.dropdown-{{id}}"
 		class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
 		{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
-		{{^aria-label}}aria-label="{{label}}"{{/aria-label}}
 	/>
 	<label
 		id="{{id}}-label"
+		for="{{id}}-checkbox"
 		class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
-		aria-hidden="true"
 	>
 		{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
 	</label>
 	{{/is-dropdown}}
 	{{!
-		Portal menus also require `label` elements, but these
-		should not be hidden and should have an accessible label
+		Portal menus also require a label
 	}}
 	{{#is-portal}}
-	<label
+	<p
 		id="{{id}}-label"
 		class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
 		{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
 	>
 		{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
-	</label>
+	</p>
 	{{/is-portal}}
 	<div class="vector-menu-content">
 		{{{html-before-portal}}}
diff --git a/includes/templates/legacy/Menu.mustache b/includes/templates/legacy/Menu.mustache
index 4b699107..c6d71421 100644
--- a/includes/templates/legacy/Menu.mustache
+++ b/includes/templates/legacy/Menu.mustache
@@ -13,7 +13,6 @@
 		class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
 		aria-labelledby="{{id}}-label"
 	/>
-	{{/is-dropdown}}
 	<label
 		id="{{id}}-label"
 		{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
@@ -21,6 +20,16 @@
 	>
 		{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
 	</label>
+	{{/is-dropdown}}
+	{{^is-dropdown}}
+	<h3
+		id="{{id}}-label"
+		{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
+		class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
+	>
+		{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
+	</h3>
+	{{/is-dropdown}}
 	<div class="vector-menu-content">
 		{{{html-before-portal}}}
 		<ul class="vector-menu-content-list">{{{html-items}}}</ul>