Customizer: Use a <button> for the collapse sidebar … button.

props afercia.
fixes #32819.

git-svn-id: https://develop.svn.wordpress.org/trunk@33153 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/customize-controls.css

@@ -648,26 +648,6 @@ p.customize-section-description {
 	border-right: 1px solid #ddd;
 }
 
-.collapse-sidebar {
-	background-color: transparent !important;
-	border: none !important;
-	-webkit-box-shadow: none !important;
-	box-shadow: none !important;
-	-webkit-border-radius: 0 !important;
-	border-radius: 0 !important;
-}
-
-
-.collapse-sidebar:active,
-.collapse-sidebar:active .collapse-sidebar-label,
-.collapse-sidebar:active .collapse-sidebar-arrow:before {
-	text-shadow: none;
-}
-
-.collapsed .collapse-sidebar-arrow:before {
-	color: #82878c;
-}
-
 /* Style for custom settings */
 
 /*

src/wp-admin/css/customize-nav-menus.css

@@ -379,13 +379,6 @@
 	display: block;
 }
 
-
-/* Not exactly sure what broke this, or why it works without these styles in core. */
-.wp-customizer .wp-full-overlay a.collapse-sidebar {
-	position: fixed;
-	left: 0;
-}
-
 /* WARNING: The 20px factor is hard-coded in JS. */
 .menu-item-depth-0  { margin-left: 0;     }
 .menu-item-depth-1  { margin-left: 20px;  }

src/wp-admin/css/themes.css

@@ -512,8 +512,6 @@
 	content: "\f345";
 }
 
-
-
 .theme-overlay .theme-wrap {
 	clear: both;
 	position: fixed;
@@ -1470,65 +1468,78 @@ body.full-overlay-active {
 }
 
 /* Collapse Button */
-.wp-full-overlay a.collapse-sidebar {
-	position: absolute;
-	bottom: 12px;
-	left: 0;
-	z-index: 50;
-	display: block;
-	width: 19px;
-	height: 19px;
-	margin-left: 15px;
+.wp-core-ui .wp-full-overlay .collapse-sidebar {
+	position: fixed;
+	bottom: 8px;
+	left: 10px;
 	padding: 0;
-	-webkit-border-radius: 50%;
-	border-radius: 50%;
-	color: #777;
-	text-decoration: none;
+	color: #656a6f;
+	outline: 0;
+	line-height: 1;
+	background-color: transparent !important;
+	border: none !important;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+	-webkit-border-radius: 0 !important;
+	border-radius: 0 !important;
 }
 
-.wp-full-overlay a.collapse-sidebar:hover {
+.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
+.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
 	color: #0073aa;
 }
 
-.wp-full-overlay.collapsed .collapse-sidebar {
-	position: absolute;
-	left: 100%;
+.wp-full-overlay .collapse-sidebar-arrow,
+.wp-full-overlay .collapse-sidebar-label {
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 20px;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow {
-	position: static;
-	margin-top: 0;
-	margin-left: 0;
-	display: block;
-	width: auto;
-	height: auto;
-	background: none;
+	width: 20px;
+	height: 20px;
+	margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
+.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
+    -webkit-box-shadow:
+    	0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+    box-shadow:
+    	0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.wp-full-overlay .collapse-sidebar-label {
+	margin-left: 3px;
+}
+
+.wp-full-overlay.collapsed .collapse-sidebar-label {
+	display: none;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow:before {
-	-webkit-border-radius: 50%;
-	border-radius: 50%;
-	float: left;
+	display: block;
 	content: "\f148";
 	background: #eee;
 	font: normal 20px/1 'dashicons';
 	speak: none;
-	display: block;
 	padding: 0;
-	text-indent: 0;
-	text-align: center;
-	position: relative;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	text-decoration: none !important;
 }
 
 /* rtl:ignore */
 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
-	-webkit-transform: rotate(180deg);
-	-ms-transform: rotate(180deg);
-	transform: rotate(180deg);
+	-webkit-transform: rotate(180.001deg);
+	-ms-transform: rotate(180.001deg);
+	transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing  */
 }
 
 .rtl .wp-full-overlay.collapsed .collapse-sidebar-arrow:before {
@@ -1537,21 +1548,6 @@ body.full-overlay-active {
 	transform: none;
 }
 
-.wp-full-overlay.collapsed .collapse-sidebar-arrow {
-	background-position: -1px -109px;
-}
-
-.wp-full-overlay .collapse-sidebar-label {
-	position: absolute;
-	left: 100%;
-	line-height: 20px;
-	margin-left: 10px;
-}
-
-.wp-full-overlay.collapsed .collapse-sidebar-label {
-	display: none;
-}
-
 /* Animations */
 .wp-full-overlay,
 .wp-full-overlay-sidebar,
@@ -1612,10 +1608,6 @@ body.full-overlay-active {
 	transition: opacity 0.3s;
 }
 
-#customize-container .collapse-sidebar {
-	bottom: 16px;
-}
-
 #customize-controls {
 	margin-top: 0;
 }

src/wp-admin/customize.php

@@ -166,10 +166,10 @@ do_action( 'customize_controls_print_scripts' );
 		</div>
 
 		<div id="customize-footer-actions" class="wp-full-overlay-footer">
-			<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
+			<button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
-				<span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
-			</a>
+				<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+			</button>
 		</div>
 	</form>
 	<div id="customize-preview" class="wp-full-overlay-main"></div>

src/wp-admin/includes/class-wp-theme-install-list-table.php

@@ -328,10 +328,10 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
 					<div class="install-theme-info"></div>
 				</div>
 				<div class="wp-full-overlay-footer">
-					<a href="#" class="collapse-sidebar" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
-						<span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
+					<button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
 						<span class="collapse-sidebar-arrow"></span>
-					</a>
+						<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+					</button>
 				</div>
 			</div>
 			<div class="wp-full-overlay-main"></div>

src/wp-admin/js/customize-controls.js

@@ -3086,13 +3086,14 @@
 			event.preventDefault();
 		});
 
-		$('.collapse-sidebar').on( 'click keydown', function( event ) {
-			if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-				return;
+		$( '.collapse-sidebar' ).on( 'click', function() {
+			if ( 'true' === $( this ).attr( 'aria-expanded' ) ) {
+				$( this ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
+			} else {
+				$( this ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
 			}
 
 			overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
-			event.preventDefault();
 		});
 
 		$( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {

src/wp-admin/js/theme.js

@@ -793,7 +793,13 @@ themes.view.Preview = themes.view.Details.extend({
 		return false;
 	},
 
-	collapse: function() {
+	collapse: function( event ) {
+		var $button = $( event.currentTarget );
+		if ( 'true' === $button.attr( 'aria-expanded' ) ) {
+			$button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar });
+		} else {
+			$button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar });
+		}
 
 		this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
 		return false;

src/wp-admin/theme-install.php

@@ -51,6 +51,8 @@ wp_localize_script( 'theme', '_wpThemeSettings', array(
 		'error'  => __( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ),
 		'themesFound'   => __( 'Number of Themes found: %d' ),
 		'noThemesFound' => __( 'No themes found. Try a different search.' ),
+		'collapseSidebar'    => __( 'Collapse Sidebar' ),
+		'expandSidebar'      => __( 'Expand Sidebar' ),
 	),
 	'installedThemes' => array_keys( $installed_themes ),
 ) );
@@ -252,10 +254,10 @@ if ( $tab ) {
 			</div>
 		</div>
 		<div class="wp-full-overlay-footer">
-			<a href="#" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
-				<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+			<button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
-			</a>
+				<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+			</button>
 		</div>
 	</div>
 	<div class="wp-full-overlay-main">

src/wp-includes/script-loader.php

@@ -419,9 +419,10 @@ function wp_default_scripts( &$scripts ) {
 		'cheatin'            => __( 'Cheatin’ uh?' ),
 		'previewIframeTitle' => __( 'Site Preview' ),
 		'loginIframeTitle'   => __( 'Session expired' ),
-
+		'collapseSidebar'    => __( 'Collapse Sidebar' ),
+		'expandSidebar'      => __( 'Expand Sidebar' ),
 		// Used for overriding the file types allowed in plupload.
-		'allowedFiles' => __( 'Allowed Files' ),
+		'allowedFiles'       => __( 'Allowed Files' ),
 	) );
 
 	$scripts->add( 'customize-widgets', "/wp-admin/js/customize-widgets$suffix.js", array( 'jquery', 'jquery-ui-sortable', 'jquery-ui-droppable', 'wp-backbone', 'customize-controls' ), false, 1 );