Changeset 36303

Timestamp:

01/14/2016 10:57:09 PM (8 years ago)

Author:

afercia

Message:

Accessibility: Improve focus handling and audible feedback on the Posts Quick-Bulk Edit.

Avoids a focus loss when saving or closing the form moving focus back to a proper place.
Uses wp.a11y.speak() to dispatch successful edits and error messages to screen readers.

Fixes #34756.

Location:

trunk/src

Files:

• wp-admin/js/inline-edit-post.js (modified) (8 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/js/inline-edit-post.js

@@ -1 +1 @@
 /* global inlineEditL10n, ajaxurl, typenow */
+window.wp = window.wp || {};
 
 var inlineEditPost;
-(function($) {
+( function( $, wp ) {
 inlineEditPost = {
 
@@ -63 +64 @@
 
         $('#doaction, #doaction2').click(function(e){
-            var n = $(this).attr('id').substr(2);
+            var n;
+
+            t.whichBulkButtonId = $( this ).attr( 'id' );
+            n = t.whichBulkButtonId.substr( 2 );
+
             if ( 'edit' === $( 'select[name="' + n + '"]' ).val() ) {
                 e.preventDefault();
@@ -245 +250 @@
     },
 
+    // Ajax saving is only for Quick Edit.
     save : function(id) {
         var params, fields, page = $('.post_status_page').val() || '';
@@ -268 +274 @@
         $.post( ajaxurl, params,
             function(r) {
+                var $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
+
                 $( 'table.widefat .spinner' ).removeClass( 'is-active' );
                 $( '.ac_results' ).hide();
@@ -275 +283 @@
                         $(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
                         $('#edit-'+id).before(r).remove();
-                        $(inlineEditPost.what+id).hide().fadeIn();
+                        $( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
+                            // Move focus back to the Quick Edit link. $( this ) is the row being animated.
+                            $( this ).find( '.editinline' ).focus();
+                            wp.a11y.speak( inlineEditL10n.saved );
+                        });
                     } else {
                         r = r.replace( /<.[^<>]*?>/g, '' );
-                        $('#edit-'+id+' .inline-edit-save .error').html(r).show();
+                        $errorSpan.html( r ).show();
+                        wp.a11y.speak( $errorSpan.text() );
                     }
                 } else {
-                    $('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
+                    $errorSpan.html( inlineEditL10n.error ).show();
+                    wp.a11y.speak( inlineEditL10n.error );
                 }
             },
@@ -289 +303 @@
     },
 
+    // Revert is for both Quick Edit and Bulk Edit.
     revert : function(){
         var $tableWideFat = $( '.widefat' ),
@@ -301 +316 @@
                 $('#bulk-titles').empty();
                 $('#inlineedit').append( $('#bulk-edit') );
+                // Move focus back to the Bulk Action button that was activated.
+                $( '#' + inlineEditPost.whichBulkButtonId ).focus();
             } else {
                 $('#'+id).siblings('tr.hidden').addBack().remove();
                 id = id.substr( id.lastIndexOf('-') + 1 );
-                $(this.what+id).show();
+                // Show the post row and move focus back to the Quick Edit link.
+                $( this.what + id ).show().find( '.editinline' ).focus();
             }
         }
@@ -363 +381 @@
 });
 
-}(jQuery));
+})( jQuery, window.wp );

trunk/src/wp-includes/script-loader.php

@@ -561 +561 @@
         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
 
-        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
+        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'wp-a11y' ), false, 1 );
         did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
-            'error' => __('Error while saving the changes.'),
-            'ntdeltitle' => __('Remove From Bulk Edit'),
-            'notitle' => __('(no title)'),
-            'comma' => trim( _x( ',', 'tag delimiter' ) ),
+            'error'      => __( 'Error while saving the changes.' ),
+            'ntdeltitle' => __( 'Remove From Bulk Edit' ),
+            'notitle'    => __( '(no title)' ),
+            'comma'      => trim( _x( ',', 'tag delimiter' ) ),
+            'saved'      => __( 'Changes saved.' ),
         ) );