From 6e5a560be0c01e236b8d43da3ac61c50f34297d0 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 28 Feb 2018 22:36:00 +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.


git-svn-id: https://develop.svn.wordpress.org/trunk@42767 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../includes/class-wp-comments-list-table.php |  2 +-
 src/wp-admin/js/edit-comments.js              | 44 ++++++++++++++-----
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/wp-admin/includes/class-wp-comments-list-table.php b/src/wp-admin/includes/class-wp-comments-list-table.php
index 5070b9480e..14e743ccb3 100644
--- a/src/wp-admin/includes/class-wp-comments-list-table.php
+++ b/src/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'] = "<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' ) );
 
diff --git a/src/wp-admin/js/edit-comments.js b/src/wp-admin/js/edit-comments.js
index b9a9f2cf85..0b0d0846bc 100644
--- a/src/wp-admin/js/edit-comments.js
+++ b/src/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 );
 	} );
 });