sergiotarxz/Wordpress
sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation. Also,
adds an `aria-expanded` attribute to the button to communicate to assistive
technologies the expanded / collapsed status of the Quick Edit form.

Props Cheffheid, audrasjb, afercia.
Fixes #38677.


git-svn-id: https://develop.svn.wordpress.org/trunk@42725 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2018-02-21 22:30:34 +00:00
parent 9e31509293
commit c729ca4171
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/wp-admin/includes/class-wp-posts-list-table.php
View File

@ -1267,7 +1267,7 @@ if ( $this->is_trash && current_user_can( get_post_type_object( $this->screen->p
__( 'Edit' ) __( 'Edit' )
); );
$actions['inline hide-if-no-js'] = sprintf( $actions['inline hide-if-no-js'] = sprintf(
'<a href="#" class="editinline" aria-label="%s">%s</a>', '<button type="button" class="button-link editinline" aria-label="%s" aria-expanded="false">%s</button>',
/* translators: %s: post title */ /* translators: %s: post title */
esc_attr( sprintf( __( 'Quick edit &#8220;%s&#8221; inline' ), $title ) ), esc_attr( sprintf( __( 'Quick edit &#8220;%s&#8221; inline' ), $title ) ),
__( 'Quick&nbsp;Edit' ) __( 'Quick&nbsp;Edit' )

18
src/wp-admin/js/inline-edit-post.js
View File

@ -119,10 +119,10 @@ var inlineEditPost;
}); });
/** /**
* Binds click event to the .editinline link which opens the quick editor. * Binds click event to the .editinline button which opens the quick editor.
*/ */
$('#the-list').on( 'click', 'a.editinline', function( e ) { $( '#the-list' ).on( 'click', '.editinline', function() {
e.preventDefault(); $( this ).attr( 'aria-expanded', 'true' );
inlineEditPost.edit( this ); inlineEditPost.edit( this );
}); });
@ -422,8 +422,10 @@ var inlineEditPost;
$(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove(); $(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
$('#edit-'+id).before(r).remove(); $('#edit-'+id).before(r).remove();
$( inlineEditPost.what + id ).hide().fadeIn( 400, function() { $( inlineEditPost.what + id ).hide().fadeIn( 400, function() {
// Move focus back to the Quick Edit link. $( this ) is the row being animated. // Move focus back to the Quick Edit button. $( this ) is the row being animated.
$( this ).find( '.editinline' ).focus(); $( this ).find( '.editinline' )
.attr( 'aria-expanded', 'false' )
.focus();
wp.a11y.speak( inlineEditL10n.saved ); wp.a11y.speak( inlineEditL10n.saved );
}); });
} else { } else {
@ -477,8 +479,10 @@ var inlineEditPost;
$('#'+id).siblings('tr.hidden').addBack().remove(); $('#'+id).siblings('tr.hidden').addBack().remove();
id = id.substr( id.lastIndexOf('-') + 1 ); id = id.substr( id.lastIndexOf('-') + 1 );
// Show the post row and move focus back to the Quick Edit link. // Show the post row and move focus back to the Quick Edit button.
$( this.what + id ).show().find( '.editinline' ).focus(); $( this.what + id ).show().find( '.editinline' )
.attr( 'aria-expanded', 'false' )
.focus();
} }
} }