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

Accessibility: Change the comments "Quick Edit" and "Reply" links to buttons.

Browse Source 
For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.

Props Cheffeid, audrasjb, afercia.
See #43382, #38677.
Fixes #43376.


git-svn-id: https://develop.svn.wordpress.org/trunk@42767 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2018-02-28 22:36:00 +00:00
parent b15919c8dd
commit 6e5a560be0
2 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -635,7 +635,7 @@ if ( ( 'spam' === $comment_status || 'trash' === $comment_status ) && current_us
if ( 'spam' !== $the_comment_status && 'trash' !== $the_comment_status ) {
$actions['edit'] = "<a href='comment.php?action=editcomment&amp;c={$comment->comment_ID}' aria-label='" . esc_attr__( 'Edit this comment' ) . "'>" . __( 'Edit' ) . '</a>';
$format = '<a data-comment-id="%d" data-post-id="%d" data-action="%s" class="%s" aria-label="%s" href="#">%s</a>';
$format = '<button type="button" data-comment-id="%d" data-post-id="%d" data-action="%s" class="%s button-link" aria-expanded="false" aria-label="%s">%s</button>';
$actions['quickedit'] = sprintf( $format, $comment->comment_ID, $comment->comment_post_ID, 'edit', 'vim-q comment-inline', esc_attr__( 'Quick edit this comment inline' ), __( 'Quick&nbsp;Edit' ) );

44
src/wp-admin/js/edit-comments.js
View File

@ -632,15 +632,37 @@ commentReply = {
},
close : function() {
var c, replyrow = $('#replyrow');
var commentRow = $(),
replyRow = $( '#replyrow' );
// replyrow is not showing?
if ( replyrow.parent().is('#com-reply') )
if ( replyRow.parent().is( '#com-reply' ) ) {
return;
}
if ( this.cid && this.act == 'edit-comment' ) {
c = $('#comment-' + this.cid);
c.fadeIn(300, function(){ c.show(); }).css('backgroundColor', '');
if ( this.cid ) {
commentRow = $( '#comment-' + this.cid );
}
/*
* When closing the Quick Edit form, show the comment row and move focus
* back to the Quick Edit button.
*/
if ( 'edit-comment' === this.act ) {
commentRow.fadeIn( 300, function() {
commentRow
.show()
.find( '.vim-q' )
.attr( 'aria-expanded', 'false' )
.focus();
} ).css( 'backgroundColor', '' );
}
// When closing the Reply form, move focus back to the Reply button.
if ( 'replyto-comment' === this.act ) {
commentRow.find( '.vim-r' )
.attr( 'aria-expanded', 'false' )
.focus();
}
// reset the Quicktags buttons
@ -649,14 +671,14 @@ commentReply = {
$('#add-new-comment').css('display', '');
replyrow.hide();
$('#com-reply').append( replyrow );
replyRow.hide();
$( '#com-reply' ).append( replyRow );
$('#replycontent').css('height', '').val('');
$('#edithead input').val('');
$( '.notice-error', replyrow )
$( '.notice-error', replyRow )
.addClass( 'hidden' )
.find( '.error' ).empty();
$( '.spinner', replyrow ).removeClass( 'is-active' );
$( '.spinner', replyRow ).removeClass( 'is-active' );
this.cid = '';
this.originalContent = '';
@ -960,8 +982,7 @@ $(document).ready(function(){
}
// Quick Edit and Reply have an inline comment editor.
$( '#the-comment-list' ).on( 'click', '.comment-inline', function (e) {
e.preventDefault();
$( '#the-comment-list' ).on( 'click', '.comment-inline', function() {
var $el = $( this ),
action = 'replyto';
@ -969,6 +990,7 @@ $(document).ready(function(){
action = $el.data( 'action' );
}
$( this ).attr( 'aria-expanded', 'true' );
commentReply.open( $el.data( 'commentId' ), $el.data( 'postId' ), action );
} );
});