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

@@ -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",

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"
 }

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."
 }

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}}}

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.
 }}

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;

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",