Changeset 38185

Timestamp:

08/03/2016 10:23:50 PM (8 years ago)

Author:

jorbin

Message:

Updates: Improve bulk update failure notice

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. 

Location:

trunk/src/wp-admin

Files:

• css/common.css (modified) (3 diffs)
• includes/update.php (modified) (2 diffs)
• js/updates.js (modified) (7 diffs)

trunk/src/wp-admin/css/common.css

@@ -3025 +3025 @@
 /* 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;
@@ -3036 +3037 @@
 
 .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";
 }
@@ -3064 +3066 @@
 .rtl.js .postbox .handlediv .toggle-indicator:before {
     text-indent: 1px; /* account for the dashicon alignment */
+}
+
+.bulk-action-notice .toggle-indicator:before {
+    line-height: 16px;
+    vertical-align: top;
+    color: #72777c;
 }
 

trunk/src/wp-admin/includes/update.php

@@ -635 +635 @@
     </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 ) { #>
@@ -665 +665 @@
                 <# } #>
                 <# 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>

trunk/src/wp-admin/js/updates.js

@@ -527 +527 @@
 
         $document.trigger( 'wp-plugin-installing', args );
-        
+
         return wp.updates.ajax( 'install-plugin', args );
     };
@@ -719 +719 @@
 
         $document.trigger( 'wp-plugin-deleting', args );
-        
+
         return wp.updates.ajax( 'delete-plugin', args );
     };
@@ -1044 +1044 @@
 
         $document.trigger( 'wp-theme-installing', args );
-        
+
         return wp.updates.ajax( 'install-theme', args );
     };
@@ -1175 +1175 @@
 
         $document.trigger( 'wp-theme-deleting', args );
-        
+
         return wp.updates.ajax( 'delete-theme', args );
     };
@@ -1983 +1983 @@
 
             $document.trigger( 'wp-' + type + '-bulk-' + bulkAction, itemsSelected );
-            
+
             // Find all the checkboxes which have been checked.
             itemsSelected.each( function( index, element ) {
@@ -2024 +2024 @@
                 wp.updates.addAdminNotice( {
                     id:            'bulk-action-notice',
+                    className:     'bulk-action-notice',
                     successes:     success,
                     errors:        error,
@@ -2031 +2032 @@
 
                 $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' );
                 } );