From 112337ce753ef2b9be8921249bdc066bce4b5d67 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sun, 17 Apr 2016 15:40:50 +0000
Subject: [PATCH] Accessibility: Customizer, improve UI controls in
 `customize.php`

- makes the mobile preview/customize toggle a button
- changes the "Close" link hidden text from 'Cancel' to 'Close the Customizer and go back to the previous page'
- adds a missing `type="button"` attribute
- removes unnecessary `keydown` events and `preventDefault()`: buttons don't need a keydown event and when they have a `type="button"` attribute there's no default action to prevent

Props Cheffheid, afercia.

Fixes #31487.

git-svn-id: https://develop.svn.wordpress.org/trunk@37230 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css |  3 ++-
 src/wp-admin/customize.php              |  8 ++++----
 src/wp-admin/js/customize-controls.js   | 14 ++------------
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 36e512aa01..82d9801e48 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -1550,10 +1550,11 @@ body.adding-widget .add-new-widget:before,
 		left: 48px;
 		line-height: 45px;
 		font-size: 14px;
-		padding: 0 12px 0 12px;
+		padding: 0 12px;
 		margin: 0;
 		height: 45px;
 		background: #eee;
+		border: 0;
 		border-right: 1px solid #ddd;
 		color: #444;
 		cursor: pointer;
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index f17bc2c10e..4a15c1536d 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.php
@@ -118,12 +118,12 @@ do_action( 'customize_controls_print_scripts' );
 			submit_button( $save_text, 'primary save', 'save', false );
 			?>
 			<span class="spinner"></span>
-			<a class="customize-controls-preview-toggle" href="#">
+			<button type="button" class="customize-controls-preview-toggle">
 				<span class="controls"><?php _e( 'Customize' ); ?></span>
 				<span class="preview"><?php _e( 'Preview' ); ?></span>
-			</a>
+			</button>
 			<a class="customize-controls-close" href="<?php echo esc_url( $wp_customize->get_return_url() ); ?>">
-				<span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
+				<span class="screen-reader-text"><?php _e( 'Close the Customizer and go back to the previous page' ); ?></span>
 			</a>
 		</div>
 
@@ -134,7 +134,7 @@ do_action( 'customize_controls_print_scripts' );
 					<span class="preview-notice"><?php
 						echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name' ) . '</strong>' );
 					?></span>
-					<button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+					<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
 				</div>
 				<div class="customize-panel-description"><?php
 					_e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 5c21af6be4..fad1087b3d 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -3272,12 +3272,7 @@
 		});
 
 		// Expand/Collapse the main customizer customize info.
-		$( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click keydown', function( event ) {
-			if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-				return;
-			}
-			event.preventDefault(); // Keep this AFTER the key filter above
-
+		$( '.customize-info' ).find( '> .accordion-section-title .customize-help-toggle' ).on( 'click', function() {
 			var section = $( this ).closest( '.accordion-section' ),
 				content = section.find( '.customize-panel-description:first' );
 
@@ -3633,13 +3628,8 @@
 			overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
 		});
 
-		$( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {
-			if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-				return;
-			}
-
+		$( '.customize-controls-preview-toggle' ).on( 'click', function() {
 			overlay.toggleClass( 'preview-only' );
-			event.preventDefault();
 		});
 
 		// Previewed device bindings.