From 2223b319f9cdb263c7a72ef0b262402a191fde16 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Fri, 27 Feb 2015 02:49:05 +0000
Subject: [PATCH] PressThis: accessibility enhancements: - Add missing form
 labels. - Add some screen-reader-text and aria-hidden attributes. - Focus
 handling improvements. - Change tagcloud-link into a button. - Add missing ID
 attribute in tools.php. Props afercia. Fixes #31449.

git-svn-id: https://develop.svn.wordpress.org/trunk@31566 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/press-this.css               |  6 ++--
 src/wp-admin/includes/class-wp-press-this.php | 35 ++++++++++++-------
 src/wp-admin/js/press-this.js                 | 27 +++++++++-----
 src/wp-admin/js/tags-box.js                   |  4 +--
 src/wp-admin/tools.php                        |  2 +-
 5 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/src/wp-admin/css/press-this.css b/src/wp-admin/css/press-this.css
index 8b1e88db0e..b272be9331 100644
--- a/src/wp-admin/css/press-this.css
+++ b/src/wp-admin/css/press-this.css
@@ -217,9 +217,9 @@ input[type="search"]::-webkit-search-decoration {
 }
 
 fieldset {
-	border: 1px solid #c0c0c0;
-	margin: 0 2px;
-	padding: 0.35em 0.625em 0.75em;
+	border: 0;
+	margin: 0;
+	padding: 0;
 }
 
 legend {
diff --git a/src/wp-admin/includes/class-wp-press-this.php b/src/wp-admin/includes/class-wp-press-this.php
index cb7c57df4f..759e73344f 100644
--- a/src/wp-admin/includes/class-wp-press-this.php
+++ b/src/wp-admin/includes/class-wp-press-this.php
@@ -537,6 +537,7 @@ class WP_Press_This {
 
 				?>
 				<div id="post-formats-select">
+				<fieldset><legend class="screen-reader-text"><?php _e( 'Post formats' ); ?></legend>
 					<input type="radio" name="post_format" class="post-format" id="post-format-0" value="0" <?php checked( $post_format, '0' ); ?> />
 					<label for="post-format-0" class="post-format-icon post-format-standard"><?php echo get_post_format_string( 'standard' ); ?></label>
 					<?php
@@ -550,6 +551,7 @@ class WP_Press_This {
 						<?php
 					 }
 					 ?>
+				</fieldset>
 				</div>
 				<?php
 			}
@@ -569,8 +571,8 @@ class WP_Press_This {
 
 		if ( current_user_can( $taxonomy->cap->edit_terms ) ) {
 			?>
-			<button type="button" class="add-cat-toggle button-subtle">
-				<span class="dashicons dashicons-plus"></span>
+			<button type="button" class="add-cat-toggle button-subtle" aria-expanded="false">
+				<span class="dashicons dashicons-plus"></span><span class="screen-reader-text"><?php _e( 'Toggle add category' ); ?></span>
 			</button>
 			<div class="add-category is-hidden">
 				<label class="screen-reader-text" for="new-category"><?php echo $taxonomy->labels->add_new_item; ?></label>
@@ -592,12 +594,12 @@ class WP_Press_This {
 			</div>
 		<?php } ?>
 		<div class="categories-search-wrapper">
-			<input id="categories-search" type="search" class="categories-search" placeholder="<?php esc_attr_e( 'Search categories' ) ?>">
+			<input id="categories-search" type="search" class="categories-search" placeholder="<?php esc_attr_e( 'Search categories by name' ) ?>">
 			<label for="categories-search">
-				<span class="dashicons dashicons-search"></span>
+				<span class="dashicons dashicons-search"></span><span class="screen-reader-text"><?php _e( 'Search categories' ); ?></span>
 			</label>
 		</div>
-		<ul class="categories-select">
+		<ul class="categories-select" aria-label="<?php esc_attr_e( 'Categories' ); ?>">
 			<?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category' ) ); ?>
 		</ul>
 		<?php
@@ -645,9 +647,7 @@ class WP_Press_This {
 		<?php
 		if ( $user_can_assign_terms ) {
 			?>
-			<p>
-				<a href="#titlediv" class="tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></a>
-			</p>
+			<button type="button" class="button-reset button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
 			<?php
 		}
 	}
@@ -756,6 +756,7 @@ class WP_Press_This {
 
 	<div id="scanbar" class="scan">
 		<form method="GET">
+			<label for="url-scan" class="screen-reader-text"><?php _e( 'Scan site for content' ); ?></label>
 			<input type="url" name="u" id="url-scan" class="scan-url" value="" placeholder="<?php esc_attr_e( 'Enter a URL to scan' ) ?>" />
 			<input type="submit" name="url-scan-submit" id="url-scan-submit" class="scan-submit" value="<?php esc_attr_e( 'Scan' ) ?>" />
 		</form>
@@ -842,19 +843,29 @@ class WP_Press_This {
 			<?php if ( $supports_formats ) : ?>
 				<div class="setting-modal is-off-screen is-hidden">
 					<button type="button" class="button-reset modal-close">
-						<span class="dashicons dashicons-arrow-left-alt2"></span><span class="setting-title"><?php _e( 'Post format' ); ?></span>
+						<span class="dashicons dashicons-arrow-left-alt2"></span>
+						<span class="setting-title" aria-hidden="true"><?php _e( 'Post format' ); ?></span>
+						<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
 					</button>
 					<?php $this->post_formats_html( $post ); ?>
 				</div>
 			<?php endif; ?>
 
 			<div class="setting-modal is-off-screen is-hidden">
-				<button type="button" class="button-reset modal-close"><span class="dashicons dashicons-arrow-left-alt2"></span><span class="setting-title"><?php _e( 'Categories' ); ?></span></button>
+				<button type="button" class="button-reset modal-close">
+					<span class="dashicons dashicons-arrow-left-alt2"></span>
+					<span class="setting-title" aria-hidden="true"><?php _e( 'Categories' ); ?></span>
+					<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
+				</button>
 				<?php $this->categories_html( $post ); ?>
 			</div>
 
 			<div class="setting-modal tags is-off-screen is-hidden">
-				<button type="button" class="button-reset modal-close"><span class="dashicons dashicons-arrow-left-alt2"></span><span class="setting-title"><?php _e( 'Tags' ); ?></span></button>
+				<button type="button" class="button-reset modal-close">
+					<span class="dashicons dashicons-arrow-left-alt2"></span>
+					<span class="setting-title" aria-hidden="true"><?php _e( 'Tags' ); ?></span>
+					<span class="screen-reader-text"><?php _e( 'Back to post options' ) ?></span>
+				</button>
 				<?php $this->tags_html( $post ); ?>
 			</div>
 		</div><!-- .options-panel -->
@@ -876,8 +887,6 @@ class WP_Press_This {
 
 	<?php
 
-		// TODO: consider running "special" press-this hooks here?
-		// Maybe better so we don't output stuff accidentally added by plugins. Would probably prevent some errors.
 		do_action( 'admin_footer', '' );
 		do_action( 'admin_print_footer_scripts' );
 
diff --git a/src/wp-admin/js/press-this.js b/src/wp-admin/js/press-this.js
index 15c0590f53..4f934c721a 100644
--- a/src/wp-admin/js/press-this.js
+++ b/src/wp-admin/js/press-this.js
@@ -540,10 +540,17 @@
 		 * Save a new user-generated category via AJAX
 		 */
 		function saveNewCategory() {
-			var data = {
+			var data,
+				name = $( '#new-category' ).val();
+
+			if ( ! name ) {
+				return;
+			}
+
+			data = {
 				action: 'press-this-add-category',
 				post_id: $( '#post_ID' ).val() || 0,
-				name: $( '#new-category' ).val() || '',
+				name: name,
 				new_cat_nonce: $( '#_ajax_nonce-add-category' ).val() || '',
 				parent: $( '#new-category-parent' ).val() || 0
 			};
@@ -810,7 +817,7 @@
 				$targetSettingModal
 					.removeClass( isOffScreen + ' ' + isHidden )
 					.one( transitionEndEvent, function() {
-						$( this ).find( $modalClose ).focus();
+						$( this ).find( '.modal-close' ).focus();
 					} );
 			} );
 
@@ -827,16 +834,16 @@
 					.addClass( isOffScreen )
 					.one( transitionEndEvent, function() {
 						$( this ).addClass( isHidden );
+						$postOption.eq( index - 1 ).focus();
 					} );
 
 				// For browser that don't support transitionend.
 				if ( ! transitionEndEvent ) {
 					setTimeout( function() {
 						$targetSettingModal.addClass( isHidden );
+						$postOption.eq( index - 1 ).focus();
 					}, 350 );
 				}
-
-				$postOption.eq( index - 1 ).focus();
 			} );
 		}
 
@@ -963,14 +970,16 @@
 			} );
 
 			$( 'button.add-cat-toggle' ).on( 'click.press-this', function() {
-				$( this ).toggleClass( 'is-toggled' );
-				$( '.setting-modal .add-category' ).toggleClass( 'is-hidden' );
-				$( '.categories-search-wrapper' ).toggleClass( 'is-hidden' );
+				var $this = $( this );
+
+				$this.toggleClass( 'is-toggled' );
+				$this.attr( 'aria-expanded', ! $this.attr( 'aria-expanded' ) );
+				$( '.setting-modal .add-category, .categories-search-wrapper' ).toggleClass( 'is-hidden' );
 			} );
 
 			$( 'button.add-cat-submit' ).on( 'click.press-this', saveNewCategory );
 
-			$( '.categories-search' ).on( 'keyup', function() {
+			$( '.categories-search' ).on( 'keyup.press-this', function() {
 				var search = $( this ).val().toLowerCase() || '';
 
 				// Don't search when less thasn 3 extended ASCII chars
diff --git a/src/wp-admin/js/tags-box.js b/src/wp-admin/js/tags-box.js
index 04c99f0a48..ee80f72e13 100644
--- a/src/wp-admin/js/tags-box.js
+++ b/src/wp-admin/js/tags-box.js
@@ -18,7 +18,7 @@ var tagBox, array_unique_noempty;
 
 		return out;
 	};
-	
+
 	tagBox = {
 		clean : function(tags) {
 			var comma = window.tagsBoxL10n.tagDelimiter;
@@ -193,7 +193,7 @@ var tagBox, array_unique_noempty;
 			});
 
 			// tag cloud
-			$('a.tagcloud-link').click(function(){
+			$('.tagcloud-link').click(function(){
 				tagBox.get( $(this).attr('id') );
 				$(this).unbind().click(function(){
 					$(this).siblings('.the-tagcloud').toggle();
diff --git a/src/wp-admin/tools.php b/src/wp-admin/tools.php
index 5fe4ba6b06..b5e600c861 100644
--- a/src/wp-admin/tools.php
+++ b/src/wp-admin/tools.php
@@ -57,7 +57,7 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );
 			</button>
 		</p>
 
-		<div class="hidden js-pressthis-code-wrap">
+		<div class="hidden js-pressthis-code-wrap" id="pressthis-code-wrap">
 			<p id="pressthis-code-desc">
 				<?php _e( 'If you can\'t drag it to your bookmarks, copy the following code and create new bookmark. Paste the code into the new bookmark\'s URL field.' ) ?>
 			</p>