Accessibility: improvements for the taxonomies Quick Edit form.

Changes the "Cancel" and "Update" controls in buttons for better semantics and
accessibility. On cancel and successful saving, moves focus back to the term title
to avoid a focus loss. Dispatches error and success messages to `wp.a11y.speak`
to give assistive technologies users an audible feedback.

Patch prepared at #wpcdit, first Italian WordPress Contributor Day.

Props garusky, chiara_09.
Fixes #34613.

git-svn-id: https://develop.svn.wordpress.org/trunk@35605 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2015-11-11 00:23:15 +00:00
parent 18dd8595cf
commit 80569cc816
3 changed files with 26 additions and 16 deletions

View File

@ -588,8 +588,8 @@ class WP_Terms_List_Table extends WP_List_Table {
?>
<p class="inline-edit-save submit">
<a href="#inline-edit" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></a>
<a href="#inline-edit" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></a>
<button type="button" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></button>
<button type="button" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></button>
<span class="spinner"></span>
<span class="error" style="display:none;"></span>
<?php wp_nonce_field( 'taxinlineeditnonce', '_inline_edit', false ); ?>

View File

@ -1,7 +1,8 @@
/* global inlineEditL10n, ajaxurl */
window.wp = window.wp || {};
var inlineEditTax;
(function($) {
( function( $, wp ) {
inlineEditTax = {
init : function() {
@ -22,10 +23,10 @@ inlineEditTax = {
}
});
$( 'a.cancel', row ).click( function() {
$( '.cancel', row ).click( function() {
return inlineEditTax.revert();
});
$( 'a.save', row ).click( function() {
$( '.save', row ).click( function() {
return inlineEditTax.save(this);
});
$( 'input, select', row ).keydown( function( e ) {
@ -96,7 +97,9 @@ inlineEditTax = {
// make ajax request
$.post( ajaxurl, params,
function(r) {
var row, new_id, option_value;
var row, new_id, option_value,
$errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
$( 'table.widefat .spinner' ).removeClass( 'is-active' );
if (r) {
@ -117,16 +120,23 @@ inlineEditTax = {
// Update the value in the Parent dropdown.
$( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
row.hide().fadeIn();
row.hide().fadeIn( 400, function() {
// Move focus back to the taxonomy title.
row.find( '.row-title' ).focus();
wp.a11y.speak( inlineEditL10n.saved );
});
} else {
$('#edit-'+id+' .inline-edit-save .error').html(r).show();
$errorSpan.html( r ).show();
// Some error strings may contain HTML entities (e.g. `&#8220`), let's use the HTML element's text.
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 );
}
}
);
return false;
},
revert : function() {
@ -136,10 +146,9 @@ inlineEditTax = {
$( 'table.widefat .spinner' ).removeClass( 'is-active' );
$('#'+id).siblings('tr.hidden').addBack().remove();
id = id.substr( id.lastIndexOf('-') + 1 );
$(this.what+id).show();
// Show the taxonomy listing and move focus back to the taxonomy title.
$( this.what + id ).show().find( '.row-title' ).focus();
}
return false;
},
getId : function(o) {
@ -149,4 +158,4 @@ inlineEditTax = {
};
$(document).ready(function(){inlineEditTax.init();});
})(jQuery);
})( jQuery, window.wp );

View File

@ -562,9 +562,10 @@ function wp_default_scripts( &$scripts ) {
'comma' => trim( _x( ',', 'tag delimiter' ) ),
) );
$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
'error' => __('Error while saving the changes.')
'error' => __( 'Error while saving the changes.' ),
'saved' => __( 'Changes saved.' ),
) );
$scripts->add( 'plugin-install', "/wp-admin/js/plugin-install$suffix.js", array( 'jquery', 'thickbox' ), false, 1 );