Accessibility: Change the terms "Quick Edit" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
See #38677 / [42725].

Fixes #43382.


git-svn-id: https://develop.svn.wordpress.org/trunk@42727 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2018-02-21 23:03:57 +00:00
parent 53a61339e4
commit 827b9056c9
2 changed files with 12 additions and 8 deletions

View File

@ -455,7 +455,7 @@ class WP_Terms_List_Table extends WP_List_Table {
__( 'Edit' )
);
$actions['inline hide-if-no-js'] = sprintf(
'<a href="#" class="editinline aria-button-if-js" aria-label="%s">%s</a>',
'<button type="button" class="button-link editinline" aria-label="%s" aria-expanded="false">%s</button>',
/* translators: %s: taxonomy term name */
esc_attr( sprintf( __( 'Quick edit &#8220;%s&#8221; inline' ), $tag->name ) ),
__( 'Quick&nbsp;Edit' )

View File

@ -36,9 +36,9 @@ inlineEditTax = {
t.type = $('#the-list').attr('data-wp-lists').substr(5);
t.what = '#'+t.type+'-';
$('#the-list').on('click', 'a.editinline', function(){
inlineEditTax.edit(this);
return false;
$( '#the-list' ).on( 'click', '.editinline', function() {
$( this ).attr( 'aria-expanded', 'true' );
inlineEditTax.edit( this );
});
/**
@ -219,8 +219,10 @@ inlineEditTax = {
$( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
row.hide().fadeIn( 400, function() {
// Move focus back to the Quick Edit link.
row.find( '.editinline' ).focus();
// Move focus back to the Quick Edit button.
row.find( '.editinline' )
.attr( 'aria-expanded', 'false' )
.focus();
wp.a11y.speak( inlineEditL10n.saved );
});
@ -262,8 +264,10 @@ inlineEditTax = {
$('#'+id).siblings('tr.hidden').addBack().remove();
id = id.substr( id.lastIndexOf('-') + 1 );
// Show the taxonomy row and move focus back to the Quick Edit link.
$( this.what + id ).show().find( '.editinline' ).focus();
// Show the taxonomy row and move focus back to the Quick Edit button.
$( this.what + id ).show().find( '.editinline' )
.attr( 'aria-expanded', 'false' )
.focus();
}
},