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.

Built from https://develop.svn.wordpress.org/trunk@33617


git-svn-id: http://core.svn.wordpress.org/trunk@33584 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-nav-menus-rtl.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;

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;

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' );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-RC2-33616';
+$wp_version = '4.3-RC2-33617';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.