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.

git-svn-id: https://develop.svn.wordpress.org/trunk@36303 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-01-14 22:57:09 +00:00
parent cc6fe1179d
commit 78adbe0bd0
2 changed files with 31 additions and 12 deletions

View File

@ -1,7 +1,8 @@
/* global inlineEditL10n, ajaxurl, typenow */
window.wp = window.wp || {};
var inlineEditPost;
(function($) {
( function( $, wp ) {
inlineEditPost = {
init : function(){
@ -62,7 +63,11 @@ inlineEditPost = {
$('select[name="_status"] option[value="future"]', bulkRow).remove();
$('#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();
t.setBulk();
@ -244,6 +249,7 @@ inlineEditPost = {
return false;
},
// Ajax saving is only for Quick Edit.
save : function(id) {
var params, fields, page = $('.post_status_page').val() || '';
@ -267,6 +273,8 @@ inlineEditPost = {
// make ajax request
$.post( ajaxurl, params,
function(r) {
var $errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
$( 'table.widefat .spinner' ).removeClass( 'is-active' );
$( '.ac_results' ).hide();
@ -274,13 +282,19 @@ inlineEditPost = {
if ( -1 !== r.indexOf( '<tr' ) ) {
$(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 );
}
},
'html');
@ -288,6 +302,7 @@ inlineEditPost = {
return false;
},
// Revert is for both Quick Edit and Bulk Edit.
revert : function(){
var $tableWideFat = $( '.widefat' ),
id = $( '.inline-editor', $tableWideFat ).attr( 'id' );
@ -300,10 +315,13 @@ inlineEditPost = {
$( '#bulk-edit', $tableWideFat ).removeClass( 'inline-editor' ).hide().siblings( '.hidden' ).remove();
$('#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();
}
}
@ -362,4 +380,4 @@ $( document ).on( 'heartbeat-tick.wp-check-locked-posts', function( e, data ) {
}
});
}(jQuery));
})( jQuery, window.wp );

View File

@ -560,12 +560,13 @@ function wp_default_scripts( &$scripts ) {
$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.' ),
) );
$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );