From a4bbc4454c593da66f416bd24c821b0678e5dc83 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Fri, 14 Aug 2015 21:22:57 +0000
Subject: [PATCH] Customize: Fix keyboard accessibility for toggling screen
 options and contextual help.

Also fix layout of search results in mobile.

Props valendesigns, afercia, adamsilverstein.
Fixes #33184.


git-svn-id: https://develop.svn.wordpress.org/trunk@33617 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-nav-menus.css | 16 +++++++++++++++-
 src/wp-admin/js/customize-nav-menus.js   | 14 ++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css
index f8f810490d..7d25c7f58d 100644
--- a/src/wp-admin/css/customize-nav-menus.css
+++ b/src/wp-admin/css/customize-nav-menus.css
@@ -710,7 +710,11 @@ button.not-a-button {
 	top: 60px; /* below title div / search input */
 	bottom: 0px; /* 100% height that still triggers lazy load */
 	max-height: none;
-	width: 270px;
+	width: 100%;
+	padding: 1px 15px 15px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 #available-menu-items .menu-item-tpl {
@@ -1036,6 +1040,12 @@ li.assigned-to-menu-location .add-new-menu-item {
 	display: none;
 }
 
+@media screen and ( max-width: 782px ) {
+	#available-menu-items #available-menu-items-search .accordion-section-content {
+		top: 63px;
+	}
+}
+
 @media screen and ( max-width: 640px ) {
 	body.adding-menu-items div#available-menu-items {
 		top: 46px;
@@ -1044,6 +1054,10 @@ li.assigned-to-menu-location .add-new-menu-item {
 		width: 100%;
 	}
 
+	#available-menu-items #available-menu-items-search .accordion-section-content {
+		top: 133px;
+	}
+
 	#available-menu-items .customize-section-title {
 		display: block;
 		margin: 0;
diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index ccaecdfecb..ebcd37b1f3 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/wp-admin/js/customize-nav-menus.js
@@ -538,7 +538,12 @@
 				content = panelMeta.find( '.customize-panel-description' ),
 				options = $( '#screen-options-wrap' ),
 				button = panelMeta.find( '.customize-screen-options-toggle' );
-			button.on( 'click', function() {
+			button.on( 'click keydown', function( event ) {
+				if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+					return;
+				}
+				event.preventDefault();
+
 				// Hide description
 				if ( content.not( ':hidden' ) ) {
 					content.slideUp( 'fast' );
@@ -561,7 +566,12 @@
 			} );
 
 			// Help toggle
-			help.on( 'click', function() {
+			help.on( 'click keydown', function( event ) {
+				if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+					return;
+				}
+				event.preventDefault();
+
 				if ( 'true' === button.attr( 'aria-expanded' ) ) {
 					button.attr( 'aria-expanded', 'false' );
 					help.attr( 'aria-expanded', 'true' );