From 805f230e99ec868133e12a422ecdd0d08545a680 Mon Sep 17 00:00:00 2001
From: Ian Stewart <iandstewart@git.wordpress.org>
Date: Fri, 24 Oct 2014 15:14:02 +0000
Subject: [PATCH] Twenty Fifteen: valid HTML for accessible child page menu
 expanding and collapsing -- now with even better accessiblity.

Props afercia, davidakennedy, iamtakashi, fixes #30083.



git-svn-id: https://develop.svn.wordpress.org/trunk@30013 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-content/themes/twentyfifteen/css/ie.css      |  4 ----
 src/wp-content/themes/twentyfifteen/functions.php   |  4 ++--
 src/wp-content/themes/twentyfifteen/js/functions.js |  4 ++--
 src/wp-content/themes/twentyfifteen/style.css       | 12 +++---------
 4 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/wp-content/themes/twentyfifteen/css/ie.css b/src/wp-content/themes/twentyfifteen/css/ie.css
index 267c0031be..3d60101a3c 100644
--- a/src/wp-content/themes/twentyfifteen/css/ie.css
+++ b/src/wp-content/themes/twentyfifteen/css/ie.css
@@ -132,10 +132,6 @@ textarea {
 	margin-top: 0;
 }
 
-.dropdown-toggle {
-	margin-top: -21px;
-}
-
 .social-navigation {
 	margin: 9.0909%;
 	max-width: 660px;
diff --git a/src/wp-content/themes/twentyfifteen/functions.php b/src/wp-content/themes/twentyfifteen/functions.php
index fd49484461..776f06a252 100644
--- a/src/wp-content/themes/twentyfifteen/functions.php
+++ b/src/wp-content/themes/twentyfifteen/functions.php
@@ -219,8 +219,8 @@ function twentyfifteen_scripts() {
 
 	wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141010', true );
 	wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
-		'expand'   => '<span class="screen-reader-text">' . esc_html__( 'Expand', 'twentyfifteen' ) . '</span>',
-		'collapse' => '<span class="screen-reader-text">' . esc_html__( 'Collapse', 'twentyfifteen' ) . '</span>',
+		'expand'   => '<span class="screen-reader-text">' . esc_html__( 'expand child menu', 'twentyfifteen' ) . '</span>',
+		'collapse' => '<span class="screen-reader-text">' . esc_html__( 'collapse child menu', 'twentyfifteen' ) . '</span>',
 	) );
 }
 add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
diff --git a/src/wp-content/themes/twentyfifteen/js/functions.js b/src/wp-content/themes/twentyfifteen/js/functions.js
index 6738430f03..f74718c075 100644
--- a/src/wp-content/themes/twentyfifteen/js/functions.js
+++ b/src/wp-content/themes/twentyfifteen/js/functions.js
@@ -9,13 +9,13 @@
 	$( 'html' ).removeClass( 'no-js' );
 
 	// Add dropdown toggle that display child menu items.
-	$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).append( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
+	$( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
 
 	$( '.dropdown-toggle' ).click( function( e ) {
 		var _this = $( this );
 		e.preventDefault();
 		_this.toggleClass( 'toggle-on' );
-		_this.parent().next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
+		_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
 		_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
 		_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
 	} );
diff --git a/src/wp-content/themes/twentyfifteen/style.css b/src/wp-content/themes/twentyfifteen/style.css
index ba6205b6f6..f5f9cf0c4f 100644
--- a/src/wp-content/themes/twentyfifteen/style.css
+++ b/src/wp-content/themes/twentyfifteen/style.css
@@ -692,17 +692,12 @@ a:focus {
 	-moz-box-sizing: content-box;
 	box-sizing: content-box;
 	content: "";
-	display: block;
-	font-size: 15px;
-	font-size: 1.5rem;
 	height: 42px;
 	padding: 0;
 	position: absolute;
-	top: 50%;
+	text-transform: lowercase; /* Stop screen readers to read the text as capital letters */
+	top: 3px;
 	right: 0;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
 	width: 42px;
 }
 
@@ -2552,9 +2547,7 @@ span > video {
 	}
 
 	.main-navigation ul {
-		border-top: 1px solid #eaeaea;
 		border-top: 1px solid rgba(51, 51, 51, 0.1);
-		border-bottom: 1px solid #eaeaea;
 		border-bottom: 1px solid rgba(51, 51, 51, 0.1);
 	}
 
@@ -5078,6 +5071,7 @@ span > video {
 
 	.dropdown-toggle {
 		height: 32px;
+		top: 4px;
 		width: 32px;
 	}