Press This: fix accessibility for the post options "sidebar". Fix size of the Add Category button.

Part props afercis, joedolson. Fixes #31575.
Built from https://develop.svn.wordpress.org/trunk@31925


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

wp-admin/css/press-this-rtl.css

@@ -854,7 +854,9 @@ input[type="search"].categories-search,
 
 .add-cat-toggle {
 	float: left;
-	margin-top: -33px;
+	margin-top: -45px;
+	line-height: 20px;
+	padding: 12px 10px 8px;
 }
 
 .add-cat-toggle:focus {
@@ -863,7 +865,7 @@ input[type="search"].categories-search,
 }
 
 .add-cat-toggle.is-toggled {
-	margin-top: -36px;
+	padding: 10px;
 }
 
 .add-cat-toggle.is-toggled .dashicons:before {
@@ -1185,34 +1187,32 @@ html {
 	vertical-align: middle;
 }
 
-.options-open,
-.options-close {
+.options,
+.options.open .on-closed,
+.options.closed .on-open {
 	display: none;
 }
 
 @media (max-width: 900px) {
-	.options-open,
-	.options-close {
+	.options {
 		display: block;
 	}
 }
 
-.options-open.is-hidden,
-.options-close.is-hidden,
 .options-panel-back.is-hidden {
 	display: none;
 }
 
-.options-open:focus .dashicons {
+.options:focus .dashicons {
 	color: #fff;
 	text-decoration: none;
 }
 
-.options-open .dashicons {
+.options .dashicons {
 	margin-top: 3px;
 }
 
-.options-close {
+.options {
 	color: #2ea2cc;
 }
 

wp-admin/css/press-this.css

@@ -854,7 +854,9 @@ input[type="search"].categories-search,
 
 .add-cat-toggle {
 	float: right;
-	margin-top: -33px;
+	margin-top: -45px;
+	line-height: 20px;
+	padding: 12px 10px 8px;
 }
 
 .add-cat-toggle:focus {
@@ -863,7 +865,7 @@ input[type="search"].categories-search,
 }
 
 .add-cat-toggle.is-toggled {
-	margin-top: -36px;
+	padding: 10px;
 }
 
 .add-cat-toggle.is-toggled .dashicons:before {
@@ -1185,34 +1187,32 @@ html {
 	vertical-align: middle;
 }
 
-.options-open,
-.options-close {
+.options,
+.options.open .on-closed,
+.options.closed .on-open {
 	display: none;
 }
 
 @media (max-width: 900px) {
-	.options-open,
-	.options-close {
+	.options {
 		display: block;
 	}
 }
 
-.options-open.is-hidden,
-.options-close.is-hidden,
 .options-panel-back.is-hidden {
 	display: none;
 }
 
-.options-open:focus .dashicons {
+.options:focus .dashicons {
 	color: #fff;
 	text-decoration: none;
 }
 
-.options-open .dashicons {
+.options .dashicons {
 	margin-top: 3px;
 }
 
-.options-close {
+.options {
 	color: #2ea2cc;
 }
 

wp-admin/includes/class-wp-press-this.php

@@ -1201,10 +1201,12 @@ class WP_Press_This {
 				<span class="current-site-name"><?php bloginfo( 'name' ); ?></span>
 			</a>
 		</h1>
-		<button type="button" class="options-open button-subtle">
-			<span class="dashicons dashicons-tag"></span><span class="screen-reader-text"><?php _e( 'Show post options' ); ?></span>
+		<button type="button" class="options button-subtle closed">
+			<span class="dashicons dashicons-tag on-closed"></span>
+			<span class="screen-reader-text on-closed"><?php _e( 'Show post options' ); ?></span>
+			<span aria-hidden="true" class="on-open"><?php _e( 'Done' ); ?></span>
+			<span class="screen-reader-text on-open"><?php _e( 'Hide post options' ); ?></span>
 		</button>
-		<button type="button" class="options-close button-subtle is-hidden"><?php _e( 'Done' ); ?></button>
 	</div>
 
 	<div id="scanbar" class="scan">

wp-admin/js/press-this.js

@@ -488,11 +488,12 @@
 		function openSidebar() {
 			sidebarIsOpen = true;
 
-			$( '.options-open, .press-this-actions, #scanbar' ).addClass( isHidden );
-			$( '.options-close, .options-panel-back' ).removeClass( isHidden );
+			$( '.options' ).removeClass( 'closed' ).addClass( 'open' );
+			$( '.press-this-actions, #scanbar' ).addClass( isHidden );
+			$( '.options-panel-back' ).removeClass( isHidden );
 
 			$( '.options-panel' ).removeClass( offscreenHidden )
-				.one( 'transitionend', function() {
+				.one( transitionEndEvent, function() {
 					$( '.post-option:first' ).focus();
 				} );
 		}
@@ -500,11 +501,12 @@
 		function closeSidebar() {
 			sidebarIsOpen = false;
 
-			$( '.options-close, .options-panel-back' ).addClass( isHidden );
-			$( '.options-open, .press-this-actions, #scanbar' ).removeClass( isHidden );
+			$( '.options' ).removeClass( 'open' ).addClass( 'closed' );
+			$( '.options-panel-back' ).addClass( isHidden );
+			$( '.press-this-actions, #scanbar' ).removeClass( isHidden );
 
 			$( '.options-panel' ).addClass( isOffScreen )
-				.one( 'transitionend', function() {
+				.one( transitionEndEvent, function() {
 					$( this ).addClass( isHidden );
 					// Reset to options list
 					$( '.post-options' ).removeClass( offscreenHidden );
@@ -620,8 +622,13 @@
 			monitorPlaceholder();
 			monitorCatList();
 
-			$( '.options-open' ).on( 'click.press-this', openSidebar );
-			$( '.options-close' ).on( 'click.press-this', closeSidebar );
+			$( '.options' ).on( 'click.press-this', function() {
+				if ( $( this ).hasClass( 'open' ) ) {
+					closeSidebar();
+				} else {
+					openSidebar();
+				}
+			});
 
 			// Close the sidebar when focus moves outside of it.
 			$( '.options-panel, .options-panel-back' ).on( 'focusout.press-this', function() {
@@ -632,7 +639,7 @@
 					if ( sidebarIsOpen && node && ! $node.hasClass( 'options-panel-back' ) &&
 						( node.nodeName === 'BODY' ||
 							( ! $node.closest( '.options-panel' ).length &&
-							! $node.closest( '.options-open' ).length ) ) ) {
+							! $node.closest( '.options' ).length ) ) ) {
 
 						closeSidebar();
 					}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-beta3-31924';
+$wp_version = '4.2-beta3-31925';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.