From d2d64f13c7f5880b871e0a8809f3db0dd420305c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 28 Feb 2018 22:36:34 +0000 Subject: [PATCH] Accessibility: Change the comments "Quick Edit" and "Reply" links to buttons. 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. Built from https://develop.svn.wordpress.org/trunk@42767 git-svn-id: http://core.svn.wordpress.org/trunk@42597 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../includes/class-wp-comments-list-table.php | 2 +- wp-admin/js/edit-comments.js | 44 ++++++++++++++----- wp-admin/js/edit-comments.min.js | 2 +- wp-includes/version.php | 2 +- 4 files changed, 36 insertions(+), 14 deletions(-) diff --git a/wp-admin/includes/class-wp-comments-list-table.php b/wp-admin/includes/class-wp-comments-list-table.php index 5070b9480e..14e743ccb3 100644 --- a/wp-admin/includes/class-wp-comments-list-table.php +++ b/wp-admin/includes/class-wp-comments-list-table.php @@ -635,7 +635,7 @@ if ( ( 'spam' === $comment_status || 'trash' === $comment_status ) && current_us if ( 'spam' !== $the_comment_status && 'trash' !== $the_comment_status ) { $actions['edit'] = "" . __( 'Edit' ) . ''; - $format = '%s'; + $format = ''; $actions['quickedit'] = sprintf( $format, $comment->comment_ID, $comment->comment_post_ID, 'edit', 'vim-q comment-inline', esc_attr__( 'Quick edit this comment inline' ), __( 'Quick Edit' ) ); diff --git a/wp-admin/js/edit-comments.js b/wp-admin/js/edit-comments.js index b9a9f2cf85..0b0d0846bc 100644 --- a/wp-admin/js/edit-comments.js +++ b/wp-admin/js/edit-comments.js @@ -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 ); } ); }); diff --git a/wp-admin/js/edit-comments.min.js b/wp-admin/js/edit-comments.min.js index 79224d53db..f1b3be0480 100644 --- a/wp-admin/js/edit-comments.min.js +++ b/wp-admin/js/edit-comments.min.js @@ -1 +1 @@ -var setCommentsList,theList,theExtraList,commentReply;!function(a){var b,c,d,e,f,g,h,i,j,k=document.title,l=a("#dashboard_right_now").length;b=function(a){var b=parseInt(a.html().replace(/[^0-9]+/g,""),10);return isNaN(b)?0:b},c=function(a,b){var c="";if(!isNaN(b)){if(b=b<1?"0":b.toString(),b.length>3){for(;b.length>3;)c=thousandsSeparator+b.substr(b.length-3)+c,b=b.substr(0,b.length-3);b+=c}a.html(b)}},f=function(e,f){var g,h,i=".post-com-count-"+f,j="comment-count-no-comments",k="comment-count-approved";d("span.approved-count",e),f&&(g=a("span."+k,i),h=a("span."+j,i),g.each(function(){var d=a(this),f=b(d)+e;f<1&&(f=0),0===f?d.removeClass(k).addClass(j):d.addClass(k).removeClass(j),c(d,f)}),h.each(function(){var b=a(this);e>0?b.removeClass(j).addClass(k):b.addClass(j).removeClass(k),c(b,e)}))},d=function(d,e){a(d).each(function(){var d=a(this),f=b(d)+e;f<1&&(f=0),c(d,f)})},h=function(b){if(l&&b&&b.i18n_comments_text){var c=a("#dashboard_right_now");a(".comment-count a",c).text(b.i18n_comments_text),a(".comment-mod-count a",c).text(b.i18n_moderation_text).parent()[b.in_moderation>0?"removeClass":"addClass"]("hidden")}},g=function(d){var e,f,g,h;j=j||new RegExp(adminCommentsL10n.docTitleCommentsCount.replace("%s","\\([0-9"+thousandsSeparator+"]+\\)")+"?"),i=i||a("
"),e=k,h=j.exec(document.title),h?(h=h[0],i.html(h),g=b(i)+d):(i.html(0),g=d),g>=1?(c(i,g),f=j.exec(document.title),f&&(e=document.title.replace(f[0],adminCommentsL10n.docTitleCommentsCount.replace("%s",i.text())+" "))):(f=j.exec(e),f&&(e=e.replace(f[0],adminCommentsL10n.docTitleComments))),document.title=e},e=function(d,e){var f,h,i=".post-com-count-"+e,j="comment-count-no-pending",k="post-com-count-no-pending",m="comment-count-pending";l||g(d),a("span.pending-count").each(function(){var e=a(this),f=b(e)+d;f<1&&(f=0),e.closest(".awaiting-mod")[0===f?"addClass":"removeClass"]("count-0"),c(e,f)}),e&&(f=a("span."+m,i),h=a("span."+j,i),f.each(function(){var e=a(this),f=b(e)+d;f<1&&(f=0),0===f?(e.parent().addClass(k),e.removeClass(m).addClass(j)):(e.parent().removeClass(k),e.addClass(m).removeClass(j)),c(e,f)}),h.each(function(){var b=a(this);d>0?(b.parent().removeClass(k),b.removeClass(j).addClass(m)):(b.parent().addClass(k),b.addClass(j).removeClass(m)),c(b,d)}))},setCommentsList=function(){var c,g,i,j,k,m,n,o,p,q=0;c=a('input[name="_total"]',"#comments-form"),g=a('input[name="_per_page"]',"#comments-form"),i=a('input[name="_page"]',"#comments-form"),m=function(a,b,d){b