From d82e4db35e8232cc83d533f8da6c8612da4c7928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Fri, 16 Jun 2017 18:34:14 +0200
Subject: [PATCH] Make dropdown menus keyboard-accessible without JavaScript

Instead of implementing keyboard (and mouse click) handling in
JavaScript, put an invisible <input type="checkbox"> into the
dropdown handle. It can be focused and toggled using keyboard
actions like a normal checkbox. This checkbox also takes over
the duties of handling mouse hovering and clicking.

Old JavaScript and CSS are left in place for compatibility with
cached page HTML, to be removed later in a follow-up.

Bug: T168080
Change-Id: I27532140b06c97921f1cfb64e44bff814d99a358
---
 VectorTemplate.php   |  2 ++
 components/tabs.less | 34 +++++++++++++++++++++++++++++++++-
 vector.js            |  3 +++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/VectorTemplate.php b/VectorTemplate.php
index fe2c87871..1296d879a 100644
--- a/VectorTemplate.php
+++ b/VectorTemplate.php
@@ -362,6 +362,7 @@ class VectorTemplate extends BaseTemplate {
 							}
 						}
 						?>
+						<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="p-variants-label" />
 						<h3 id="p-variants-label">
 							<span><?php echo htmlspecialchars( $variantLabel ) ?></span>
 						</h3>
@@ -405,6 +406,7 @@ class VectorTemplate extends BaseTemplate {
 						echo ' emptyPortlet';
 					}
 					?>" aria-labelledby="p-cactions-label">
+						<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="p-cactions-label" />
 						<h3 id="p-cactions-label"><span><?php
 							$this->msg( 'vector-more-actions' )
 						?></span></h3>
diff --git a/components/tabs.less b/components/tabs.less
index 006bcbb7d..29d78afbc 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -167,10 +167,17 @@ div.vectorMenu h3 {
 	}
 }
 
+div.vectorMenu .vectorMenuCheckbox:checked + h3 span:after,
 div.vectorMenu.menuForceShow h3 span:after {
 	transform: scaleY( -1 );
 }
 
+div.vectorMenu .vectorMenuCheckbox:focus + h3 {
+	// Simulate browser focus ring
+	outline: dotted 1px; // Firefox style
+	outline: auto -webkit-focus-ring-color; // Webkit style
+}
+
 div.vectorMenu div.menu {
 	// Match the width of the dropdown "heading" (the tab)
 	min-width: 100%;
@@ -188,11 +195,15 @@ div.vectorMenu div.menu {
 	z-index: 2;
 }
 
-/* Enable forcing showing of the menu for accessibility */
 div.vectorMenu:hover div.menu,
 div.vectorMenu.menuForceShow div.menu {
 	display: block;
 }
+// This is in a separate block, so that browsers supporting :hover but not :checked still apply the rule above
+// Support: IE8
+div.vectorMenu .vectorMenuCheckbox:checked ~ div.menu {
+	display: block;
+}
 
 div.vectorMenu ul {
 	list-style-type: none;
@@ -247,6 +258,27 @@ div.vectorMenu li.selected a:visited {
 	text-decoration: none;
 }
 
+// Invisible checkbox covering the dropdown menu handle
+.vectorMenuCheckbox {
+	cursor: pointer;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1;
+	opacity: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	// Hide the checkbox completely in browsers that don't support :checked
+	display: none;
+}
+
+:not( :checked ) > .vectorMenuCheckbox {
+	// When the browser supports :checked, display it
+	display: block;
+}
+
 // Expand vectorMenu as basic tabs in IE6
 // (IE6 doesn't support :hover on DIV)
 * html div.vectorMenu div.menu {
diff --git a/vector.js b/vector.js
index e306ea97b..bc09430c5 100644
--- a/vector.js
+++ b/vector.js
@@ -30,6 +30,9 @@ jQuery( function ( $ ) {
 	 */
 	$( 'div.vectorMenu' ).each( function () {
 		var $el = $( this );
+		if ( $el.find( '.vectorMenuCheckbox' ).length ) {
+			return;
+		}
 		$el.find( '> h3 > span' ).parent()
 			.attr( 'tabindex', '0' )
 			// For accessibility, show the menu when the h3 is clicked (bug 24298/46486)