From 21c45837ef431857145e1eda0d8f44e568cac1b1 Mon Sep 17 00:00:00 2001
From: Clare Ming <cming@wikimedia.org>
Date: Mon, 30 Aug 2021 16:27:15 -0600
Subject: [PATCH] Spoof aria-expanded for dropdown menus using checkbox hack

- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.

Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
---
 bundlesize.config.json                        |  4 ++--
 i18n/en.json                                  |  4 +++-
 i18n/qqq.json                                 |  4 +++-
 includes/templates/Menu.mustache              | 10 ++++++++--
 includes/templates/skin.mustache              |  2 ++
 resources/common/components/MenuDropdown.less | 14 ++++++++++++++
 skin.json                                     |  2 ++
 7 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/bundlesize.config.json b/bundlesize.config.json
index 8ef1adb..5cccda9 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -1,11 +1,11 @@
 [
 	{
 		"resourceModule": "skins.vector.styles.legacy",
-		"maxSize": "7.7 kB"
+		"maxSize": "7.8 kB"
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "9.7 kB"
+		"maxSize": "9.8 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",
diff --git a/i18n/en.json b/i18n/en.json
index b2b7a3d..fa3a734 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -33,5 +33,7 @@
 	"vector-anon-user-menu-pages-label": "Learn more about editing",
 	"vector-personal-more-label": "User links",
 	"vector-main-menu-tooltip": "Main menu",
-	"tooltip-vector-anon-user-menu-title": "More options"
+	"tooltip-vector-anon-user-menu-title": "More options",
+	"vector-menu-checkbox-expanded": "expanded",
+	"vector-menu-checkbox-collapsed": "collapsed"
 }
diff --git a/i18n/qqq.json b/i18n/qqq.json
index acf19a3..d1c5fc4 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -45,5 +45,7 @@
 	"vector-anon-user-menu-pages-label": "Accessible version of 'vector-anon-user-menu-pages' link text, prompts user to learn more about editing",
 	"vector-personal-more-label": "Label describing the user links next to the user links dropdown menu.",
 	"vector-main-menu-tooltip": "Used as title attribute for main menu icon on hover.",
-	"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users."
+	"tooltip-vector-anon-user-menu-title": "Used as title attribute for user menu icon on hover for anonymous users.",
+	"vector-menu-checkbox-expanded": "Label for expanded state of dropdown menus for screen reader or assistive technology users.",
+	"vector-menu-checkbox-collapsed": "Label for collapsed state of dropdown menus for screen reader or assistive technology users."
 }
diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 89c82e5..738001f 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -7,11 +7,17 @@
 	{{#is-dropdown}}
 	<input type="checkbox"
 		id="{{id}}-checkbox"
+		role="button"
+		aria-haspopup="true"
 		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}}>{{!
-		}}<span>{{label}}</span>
+	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>
+		<span>{{label}}</span>
+		{{#is-dropdown}}
+			<span class="vector-menu-checkbox-expanded">{{msg-vector-menu-checkbox-expanded}}</span>
+			<span class="vector-menu-checkbox-collapsed">{{msg-vector-menu-checkbox-collapsed}}</span>
+		{{/is-dropdown}}
 	</h3>
 	<div class="vector-menu-content">
 		{{{html-before-portal}}}
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 8abc65d..7f44c13 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -28,6 +28,8 @@
 	  true.
 	string msg-vector-action-toggle-sidebar The label used by the sidebar button.
 	string msg-vector-main-menu-tooltip The title attribute for the main menu icon.
+	string msg-vector-menu-checkbox-expanded Dropdown menu span content for expanded selection in checkbox hack.
+	string msg-vector-menu-checkbox-collapsed Dropdown menu span content for collapsed selection in checkbox hack.
 	object data-portlets-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
 }}
diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less
index 8ae6bbd..3948222 100644
--- a/resources/common/components/MenuDropdown.less
+++ b/resources/common/components/MenuDropdown.less
@@ -69,6 +69,20 @@
 		z-index: @z-index-menu;
 	}
 
+	// Hide elements visually but not from screen readers.
+	.vector-menu-checkbox-expanded,
+	.vector-menu-checkbox-collapsed {
+		.mixin-screen-reader-text();
+		display: none;
+	}
+
+	// Reveal correct "expanded" status text to screen readers based off checked status.
+	.vector-menu-checkbox:checked + .vector-menu-heading .vector-menu-checkbox-expanded,
+	.vector-menu-checkbox:not( :checked ) + .vector-menu-heading .vector-menu-checkbox-collapsed {
+		display: inline;
+	}
+
+	// Hide and show menu content based off checked status.
 	.vector-menu-checkbox:checked ~ .vector-menu-content {
 		opacity: 1;
 		visibility: visible;
diff --git a/skin.json b/skin.json
index 47fc526..a5b5c2d 100644
--- a/skin.json
+++ b/skin.json
@@ -45,6 +45,8 @@
 						"navigation-heading",
 						"vector-action-toggle-sidebar",
 						"vector-main-menu-tooltip",
+						"vector-menu-checkbox-expanded",
+						"vector-menu-checkbox-collapsed",
 						"vector-jumptonavigation",
 						"vector-jumptosearch",
 						"vector-jumptocontent",