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

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' ) );
 

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 );
 	} );
 });

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.0-alpha-42766';
+$wp_version = '5.0-alpha-42767';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.