Changeset 42767

Timestamp:

02/28/2018 10:36:00 PM (7 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-admin

Files:

• includes/class-wp-comments-list-table.php (modified) (1 diff)
• js/edit-comments.js (modified) (4 diffs)

trunk/src/wp-admin/includes/class-wp-comments-list-table.php

@@ -636 +636 @@
             $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' ) );

trunk/src/wp-admin/js/edit-comments.js

@@ -633 +633 @@
 
     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();
         }
 
@@ -650 +672 @@
         $('#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 = '';
@@ -961 +983 @@
 
     // 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';
@@ -970 +991 @@
         }
 
+        $( this ).attr( 'aria-expanded', 'true' );
         commentReply.open( $el.data( 'commentId' ), $el.data( 'postId' ), action );
     } );