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.
Built from https://develop.svn.wordpress.org/trunk@35605


git-svn-id: http://core.svn.wordpress.org/trunk@35569 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia 2015-11-11 00:24:28 +00:00
parent eba05b2c98
commit 5f93491286
5 changed files with 28 additions and 18 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

@ -1 +1 @@
var inlineEditTax;!function(a){inlineEditTax={init:function(){var b=this,c=a("#inline-edit");b.type=a("#the-list").attr("data-wp-lists").substr(5),b.what="#"+b.type+"-",a("#the-list").on("click","a.editinline",function(){return inlineEditTax.edit(this),!1}),c.keyup(function(a){return 27===a.which?inlineEditTax.revert():void 0}),a("a.cancel",c).click(function(){return inlineEditTax.revert()}),a("a.save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){return 13===a.which?inlineEditTax.save(this):void 0}),a('#posts-filter input[type="submit"]').mousedown(function(){b.revert()})},toggle:function(b){var c=this;"none"===a(c.what+c.getId(b)).css("display")?c.revert():c.edit(b)},edit:function(b){var c,d,e,f=this;return f.revert(),"object"==typeof b&&(b=f.getId(b)),c=a("#inline-edit").clone(!0),d=a("#inline_"+b),a("td",c).attr("colspan",a("th:visible, td:visible",".widefat:first thead").length),a(f.what+b).hide().after(c).after('<tr class="hidden"></tr>'),e=a(".name",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="name"]',c).val(e),e=a(".slug",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="slug"]',c).val(e),a(c).attr("id","edit-"+b).addClass("inline-editor").show(),a(".ptitle",c).eq(0).focus(),!1},save:function(b){var c,d,e=a('input[name="taxonomy"]').val()||"";return"object"==typeof b&&(b=this.getId(b)),a("table.widefat .spinner").addClass("is-active"),c={action:"inline-save-tax",tax_type:this.type,tax_ID:b,taxonomy:e},d=a("#edit-"+b).find(":input").serialize(),c=d+"&"+a.param(c),a.post(ajaxurl,c,function(c){var d,e,f;a("table.widefat .spinner").removeClass("is-active"),c?-1!==c.indexOf("<tr")?(a(inlineEditTax.what+b).siblings("tr.hidden").addBack().remove(),e=a(c).attr("id"),a("#edit-"+b).before(c).remove(),e?(f=e.replace(inlineEditTax.type+"-",""),d=a("#"+e)):(f=b,d=a(inlineEditTax.what+b)),a("#parent").find("option[value="+f+"]").text(d.find(".row-title").text()),d.hide().fadeIn()):a("#edit-"+b+" .inline-edit-save .error").html(c).show():a("#edit-"+b+" .inline-edit-save .error").html(inlineEditL10n.error).show()}),!1},revert:function(){var b=a("table.widefat tr.inline-editor").attr("id");return b&&(a("table.widefat .spinner").removeClass("is-active"),a("#"+b).siblings("tr.hidden").addBack().remove(),b=b.substr(b.lastIndexOf("-")+1),a(this.what+b).show()),!1},getId:function(b){var c="TR"===b.tagName?b.id:a(b).parents("tr").attr("id"),d=c.split("-");return d[d.length-1]}},a(document).ready(function(){inlineEditTax.init()})}(jQuery);
window.wp=window.wp||{};var inlineEditTax;!function(a,b){inlineEditTax={init:function(){var b=this,c=a("#inline-edit");b.type=a("#the-list").attr("data-wp-lists").substr(5),b.what="#"+b.type+"-",a("#the-list").on("click","a.editinline",function(){return inlineEditTax.edit(this),!1}),c.keyup(function(a){return 27===a.which?inlineEditTax.revert():void 0}),a(".cancel",c).click(function(){return inlineEditTax.revert()}),a(".save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){return 13===a.which?inlineEditTax.save(this):void 0}),a('#posts-filter input[type="submit"]').mousedown(function(){b.revert()})},toggle:function(b){var c=this;"none"===a(c.what+c.getId(b)).css("display")?c.revert():c.edit(b)},edit:function(b){var c,d,e,f=this;return f.revert(),"object"==typeof b&&(b=f.getId(b)),c=a("#inline-edit").clone(!0),d=a("#inline_"+b),a("td",c).attr("colspan",a("th:visible, td:visible",".widefat:first thead").length),a(f.what+b).hide().after(c).after('<tr class="hidden"></tr>'),e=a(".name",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="name"]',c).val(e),e=a(".slug",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="slug"]',c).val(e),a(c).attr("id","edit-"+b).addClass("inline-editor").show(),a(".ptitle",c).eq(0).focus(),!1},save:function(c){var d,e,f=a('input[name="taxonomy"]').val()||"";"object"==typeof c&&(c=this.getId(c)),a("table.widefat .spinner").addClass("is-active"),d={action:"inline-save-tax",tax_type:this.type,tax_ID:c,taxonomy:f},e=a("#edit-"+c).find(":input").serialize(),d=e+"&"+a.param(d),a.post(ajaxurl,d,function(d){var e,f,g,h=a("#edit-"+c+" .inline-edit-save .error");a("table.widefat .spinner").removeClass("is-active"),d?-1!==d.indexOf("<tr")?(a(inlineEditTax.what+c).siblings("tr.hidden").addBack().remove(),f=a(d).attr("id"),a("#edit-"+c).before(d).remove(),f?(g=f.replace(inlineEditTax.type+"-",""),e=a("#"+f)):(g=c,e=a(inlineEditTax.what+c)),a("#parent").find("option[value="+g+"]").text(e.find(".row-title").text()),e.hide().fadeIn(400,function(){e.find(".row-title").focus(),b.a11y.speak(inlineEditL10n.saved)})):(h.html(d).show(),b.a11y.speak(h.text())):(h.html(inlineEditL10n.error).show(),b.a11y.speak(inlineEditL10n.error))})},revert:function(){var b=a("table.widefat tr.inline-editor").attr("id");b&&(a("table.widefat .spinner").removeClass("is-active"),a("#"+b).siblings("tr.hidden").addBack().remove(),b=b.substr(b.lastIndexOf("-")+1),a(this.what+b).show().find(".row-title").focus())},getId:function(b){var c="TR"===b.tagName?b.id:a(b).parents("tr").attr("id"),d=c.split("-");return d[d.length-1]}},a(document).ready(function(){inlineEditTax.init()})}(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 );

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.4-beta3-35604';
$wp_version = '4.4-beta3-35605';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.