WordPress.org

Make WordPress Core

Changeset 42767


Ignore:
Timestamp:
02/28/2018 10:36:00 PM (3 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/class-wp-comments-list-table.php

    r42684 r42767  
    636636            $actions['edit'] = "<a href='comment.php?action=editcomment&amp;c={$comment->comment_ID}' aria-label='" . esc_attr__( 'Edit this comment' ) . "'>" . __( 'Edit' ) . '</a>';
    637637
    638             $format = '<a data-comment-id="%d" data-post-id="%d" data-action="%s" class="%s" aria-label="%s" href="#">%s</a>';
     638            $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>';
    639639
    640640            $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

    r41684 r42767  
    633633
    634634    close : function() {
    635         var c, replyrow = $('#replyrow');
     635        var commentRow = $(),
     636            replyRow = $( '#replyrow' );
    636637
    637638        // replyrow is not showing?
    638         if ( replyrow.parent().is('#com-reply') )
     639        if ( replyRow.parent().is( '#com-reply' ) ) {
    639640            return;
    640 
    641         if ( this.cid && this.act == 'edit-comment' ) {
    642             c = $('#comment-' + this.cid);
    643             c.fadeIn(300, function(){ c.show(); }).css('backgroundColor', '');
     641        }
     642
     643        if ( this.cid ) {
     644            commentRow = $( '#comment-' + this.cid );
     645        }
     646
     647        /*
     648         * When closing the Quick Edit form, show the comment row and move focus
     649         * back to the Quick Edit button.
     650         */
     651        if ( 'edit-comment' === this.act ) {
     652            commentRow.fadeIn( 300, function() {
     653                commentRow
     654                    .show()
     655                    .find( '.vim-q' )
     656                        .attr( 'aria-expanded', 'false' )
     657                        .focus();
     658            } ).css( 'backgroundColor', '' );
     659        }
     660
     661        // When closing the Reply form, move focus back to the Reply button.
     662        if ( 'replyto-comment' === this.act ) {
     663            commentRow.find( '.vim-r' )
     664                .attr( 'aria-expanded', 'false' )
     665                .focus();
    644666        }
    645667
     
    650672        $('#add-new-comment').css('display', '');
    651673
    652         replyrow.hide();
    653         $('#com-reply').append( replyrow );
     674        replyRow.hide();
     675        $( '#com-reply' ).append( replyRow );
    654676        $('#replycontent').css('height', '').val('');
    655677        $('#edithead input').val('');
    656         $( '.notice-error', replyrow )
     678        $( '.notice-error', replyRow )
    657679            .addClass( 'hidden' )
    658680            .find( '.error' ).empty();
    659         $( '.spinner', replyrow ).removeClass( 'is-active' );
     681        $( '.spinner', replyRow ).removeClass( 'is-active' );
    660682
    661683        this.cid = '';
     
    961983
    962984    // Quick Edit and Reply have an inline comment editor.
    963     $( '#the-comment-list' ).on( 'click', '.comment-inline', function (e) {
    964         e.preventDefault();
     985    $( '#the-comment-list' ).on( 'click', '.comment-inline', function() {
    965986        var $el = $( this ),
    966987            action = 'replyto';
     
    970991        }
    971992
     993        $( this ).attr( 'aria-expanded', 'true' );
    972994        commentReply.open( $el.data( 'commentId' ), $el.data( 'postId' ), action );
    973995    } );
Note: See TracChangeset for help on using the changeset viewer.