From 10906c673fff3f6eabc0dc330e68401de3b4bc4b Mon Sep 17 00:00:00 2001
From: Aaron Jorbin <jorbin@git.wordpress.org>
Date: Wed, 3 Aug 2016 22:23:50 +0000
Subject: [PATCH] Updates: Improve bulk update failure notice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When doing a bulk update, if there are failures the user needs to know about that. This makes it clearer that you can click on the notification to see more details, especially for screen reader users.

Fixes #37510.
Props  juhise, Ankit K Gupta, afercia, jorbin, ocean90. 



git-svn-id: https://develop.svn.wordpress.org/trunk@38185 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css      | 12 ++++++++++--
 src/wp-admin/includes/update.php | 26 +++++++++++++-------------
 src/wp-admin/js/updates.js       | 18 ++++++++++++------
 3 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index b09c390202..a468d81395 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -3024,7 +3024,8 @@ img {
 
 /* Metabox collapse arrow indicators */
 .js .sidebar-name .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox .toggle-indicator:before {
+.js .meta-box-sortables .postbox .toggle-indicator:before,
+.bulk-action-notice .toggle-indicator:before {
 	content: "\f142";
 	display: inline-block;
 	font: normal 20px/1 dashicons;
@@ -3035,7 +3036,8 @@ img {
 }
 
 .js .widgets-holder-wrap.closed .sidebar-name-arrow:before,
-.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before {
+.js .meta-box-sortables .postbox.closed .handlediv .toggle-indicator:before,
+.bulk-action-notice .bulk-action-errors-collapsed .toggle-indicator:before {
 	content: "\f140";
 }
 
@@ -3065,6 +3067,12 @@ img {
 	text-indent: 1px; /* account for the dashicon alignment */
 }
 
+.bulk-action-notice .toggle-indicator:before {
+	line-height: 16px;
+	vertical-align: top;
+	color: #72777c;
+}
+
 .js .postbox .handlediv:focus {
 	-webkit-box-shadow: none;
 	box-shadow: none;
diff --git a/src/wp-admin/includes/update.php b/src/wp-admin/includes/update.php
index 457b5fee63..74899e37cb 100644
--- a/src/wp-admin/includes/update.php
+++ b/src/wp-admin/includes/update.php
@@ -634,7 +634,7 @@ function wp_print_admin_notice_templates() {
 		<div <# if ( data.id ) { #>id="{{ data.id }}"<# } #> class="notice {{ data.className }}"><p>{{{ data.message }}}</p></div>
 	</script>
 	<script id="tmpl-wp-bulk-updates-admin-notice" type="text/html">
-		<div id="{{ data.id }}" class="notice <# if ( data.errors ) { #>notice-error<# } else { #>notice-success<# } #>">
+		<div id="{{ data.id }}" class="{{ data.className }} notice <# if ( data.errors ) { #>notice-error<# } else { #>notice-success<# } #>">
 			<p>
 				<# if ( data.successes ) { #>
 					<# if ( 1 === data.successes ) { #>
@@ -664,25 +664,25 @@ function wp_print_admin_notice_templates() {
 					<# } #>
 				<# } #>
 				<# if ( data.errors ) { #>
-					<# if ( 1 === data.errors ) { #>
-						<button class="button-link">
+					<button class="button-link bulk-action-errors-collapsed" aria-expanded="false">
+						<# if ( 1 === data.errors ) { #>
 							<?php
-							/* translators: %s: Number of failures */
-							printf( __( '%s failure.' ), '{{ data.errors }}' );
+							/* translators: %s: Number of failed updates */
+							printf( __( '%s update failed.' ), '{{ data.errors }}' );
 							?>
-						</button>
-					<# } else { #>
-						<button class="button-link">
+						<# } else { #>
 							<?php
-							/* translators: %s: Number of failures */
-							printf( __( '%s failures.' ), '{{ data.errors }}' );
+							/* translators: %s: Number of failed updates */
+							printf( __( '%s updates failed.' ), '{{ data.errors }}' );
 							?>
-						</button>
-					<# } #>
+						<# } #>
+						<span class="screen-reader-text"><?php _e( 'Show more details' ); ?></span>
+						<span class="toggle-indicator" aria-hidden="true"></span>
+					</button>
 				<# } #>
 			</p>
 			<# if ( data.errors ) { #>
-				<ul class="hidden">
+				<ul class="bulk-action-errors hidden">
 					<# _.each( data.errorMessages, function( errorMessage ) { #>
 						<li>{{ errorMessage }}</li>
 					<# } ); #>
diff --git a/src/wp-admin/js/updates.js b/src/wp-admin/js/updates.js
index 33756ffd74..f327c003be 100644
--- a/src/wp-admin/js/updates.js
+++ b/src/wp-admin/js/updates.js
@@ -526,7 +526,7 @@
 		$card.removeClass( 'plugin-card-install-failed' ).find( '.notice.notice-error' ).remove();
 
 		$document.trigger( 'wp-plugin-installing', args );
-		
+
 		return wp.updates.ajax( 'install-plugin', args );
 	};
 
@@ -718,7 +718,7 @@
 		wp.a11y.speak( wp.updates.l10n.deleting, 'polite' );
 
 		$document.trigger( 'wp-plugin-deleting', args );
-		
+
 		return wp.updates.ajax( 'delete-plugin', args );
 	};
 
@@ -1043,7 +1043,7 @@
 		$( '.install-theme-info, [data-slug="' + args.slug + '"]' ).removeClass( 'theme-install-failed' ).find( '.notice.notice-error' ).remove();
 
 		$document.trigger( 'wp-theme-installing', args );
-		
+
 		return wp.updates.ajax( 'install-theme', args );
 	};
 
@@ -1174,7 +1174,7 @@
 		$( '.theme-info .update-message' ).remove();
 
 		$document.trigger( 'wp-theme-deleting', args );
-		
+
 		return wp.updates.ajax( 'delete-theme', args );
 	};
 
@@ -1982,7 +1982,7 @@
 			$bulkActionForm.find( '.manage-column [type="checkbox"]' ).prop( 'checked', false );
 
 			$document.trigger( 'wp-' + type + '-bulk-' + bulkAction, itemsSelected );
-			
+
 			// Find all the checkboxes which have been checked.
 			itemsSelected.each( function( index, element ) {
 				var $checkbox  = $( element ),
@@ -2023,6 +2023,7 @@
 
 				wp.updates.addAdminNotice( {
 					id:            'bulk-action-notice',
+					className:     'bulk-action-notice',
 					successes:     success,
 					errors:        error,
 					errorMessages: errorMessages,
@@ -2030,7 +2031,12 @@
 				} );
 
 				$bulkActionNotice = $( '#bulk-action-notice' ).on( 'click', 'button', function() {
-					$bulkActionNotice.find( 'ul' ).toggleClass( 'hidden' );
+					// $( this ) is the clicked button, no need to get it again.
+					$( this )
+						.toggleClass( 'bulk-action-errors-collapsed' )
+						.attr( 'aria-expanded', ! $( this ).hasClass( 'bulk-action-errors-collapsed' ) );
+					// Show the errors list.
+					$bulkActionNotice.find( '.bulk-action-errors' ).toggleClass( 'hidden' );
 				} );
 
 				if ( error > 0 && ! wp.updates.queue.length ) {