Make WordPress Core

Changeset 36303


Ignore:
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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/inline-edit-post.js

    r36260 r36303  
    11/* global inlineEditL10n, ajaxurl, typenow */
     2window.wp = window.wp || {};
    23
    34var inlineEditPost;
    4 (function($) {
     5( function( $, wp ) {
    56inlineEditPost = {
    67
     
    6364
    6465        $('#doaction, #doaction2').click(function(e){
    65             var n = $(this).attr('id').substr(2);
     66            var n;
     67
     68            t.whichBulkButtonId = $( this ).attr( 'id' );
     69            n = t.whichBulkButtonId.substr( 2 );
     70
    6671            if ( 'edit' === $( 'select[name="' + n + '"]' ).val() ) {
    6772                e.preventDefault();
     
    245250    },
    246251
     252    // Ajax saving is only for Quick Edit.
    247253    save : function(id) {
    248254        var params, fields, page = $('.post_status_page').val() || '';
     
    268274        $.post( ajaxurl, params,
    269275            function(r) {
     276                var $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
     277
    270278                $( 'table.widefat .spinner' ).removeClass( 'is-active' );
    271279                $( '.ac_results' ).hide();
     
    275283                        $(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
    276284                        $('#edit-'+id).before(r).remove();
    277                         $(inlineEditPost.what+id).hide().fadeIn();
     285                        $( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
     286                            // Move focus back to the Quick Edit link. $( this ) is the row being animated.
     287                            $( this ).find( '.editinline' ).focus();
     288                            wp.a11y.speak( inlineEditL10n.saved );
     289                        });
    278290                    } else {
    279291                        r = r.replace( /<.[^<>]*?>/g, '' );
    280                         $('#edit-'+id+' .inline-edit-save .error').html(r).show();
     292                        $errorSpan.html( r ).show();
     293                        wp.a11y.speak( $errorSpan.text() );
    281294                    }
    282295                } else {
    283                     $('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
     296                    $errorSpan.html( inlineEditL10n.error ).show();
     297                    wp.a11y.speak( inlineEditL10n.error );
    284298                }
    285299            },
     
    289303    },
    290304
     305    // Revert is for both Quick Edit and Bulk Edit.
    291306    revert : function(){
    292307        var $tableWideFat = $( '.widefat' ),
     
    301316                $('#bulk-titles').empty();
    302317                $('#inlineedit').append( $('#bulk-edit') );
     318                // Move focus back to the Bulk Action button that was activated.
     319                $( '#' + inlineEditPost.whichBulkButtonId ).focus();
    303320            } else {
    304321                $('#'+id).siblings('tr.hidden').addBack().remove();
    305322                id = id.substr( id.lastIndexOf('-') + 1 );
    306                 $(this.what+id).show();
     323                // Show the post row and move focus back to the Quick Edit link.
     324                $( this.what + id ).show().find( '.editinline' ).focus();
    307325            }
    308326        }
     
    363381});
    364382
    365 }(jQuery));
     383})( jQuery, window.wp );
  • trunk/src/wp-includes/script-loader.php

    r36295 r36303  
    561561        $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
    562562
    563         $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
     563        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest', 'wp-a11y' ), false, 1 );
    564564        did_action( 'init' ) && $scripts->localize( 'inline-edit-post', 'inlineEditL10n', array(
    565             'error' => __('Error while saving the changes.'),
    566             'ntdeltitle' => __('Remove From Bulk Edit'),
    567             'notitle' => __('(no title)'),
    568             'comma' => trim( _x( ',', 'tag delimiter' ) ),
     565            'error'      => __( 'Error while saving the changes.' ),
     566            'ntdeltitle' => __( 'Remove From Bulk Edit' ),
     567            'notitle'    => __( '(no title)' ),
     568            'comma'      => trim( _x( ',', 'tag delimiter' ) ),
     569            'saved'      => __( 'Changes saved.' ),
    569570        ) );
    570571
Note: See TracChangeset for help on using the changeset viewer.