From 9369d03bc5272c28a7777a415a1c89d990e8c8ba Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Mon, 30 Mar 2015 03:08:30 +0000
Subject: [PATCH] Press This: fix accessibility for the post options "sidebar".
 Fix size of the Add Category button. Part props afercis, joedolson. Fixes
 #31575.

git-svn-id: https://develop.svn.wordpress.org/trunk@31925 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/press-this.css               | 22 ++++++++--------
 src/wp-admin/includes/class-wp-press-this.php |  8 +++---
 src/wp-admin/js/press-this.js                 | 25 ++++++++++++-------
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css
index ec2b4751f4..42a76c7d49 100644
--- a/src/wp-admin/css/press-this.css
+++ b/src/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;
 }
 
diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php
index 8961a099a2..7b0c75cb1c 100644
--- a/src/wp-admin/includes/class-wp-press-this.php
+++ b/src/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">
diff --git a/src/wp-admin/js/press-this.js b/src/wp-admin/js/press-this.js
index f5591ddf76..fb05f94d1d 100644
--- a/src/wp-admin/js/press-this.js
+++ b/src/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();
 					}