WordPress.org

Make WordPress Core


Ignore:
Timestamp:
07/10/2015 09:43:32 PM (4 years ago)
Author:
helen
Message:

List tables: Better accessibility and design for the comments bubble.

It is now plain text in the comments list table's "In Response To" column, where it was visually a bit confusing to have the bubble. For other list tables, it now shows a little notification bubble with the number of pending comments. The bubble and notification become plain text in the responsive list table view. It also shows no bubble when there are no comments at all, reducing some of the visual noise.

props picard102, afercia, karinchristen.
fixes #32152.

File:
1 edited

Legend:

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

    r33104 r33155  
    615615     */
    616616    protected function comments_bubble( $post_id, $pending_comments ) {
    617         $pending_phrase = sprintf( __( '%s pending' ), number_format( $pending_comments ) );
    618 
    619         if ( $pending_comments )
    620             echo '<strong>';
    621 
    622         echo "<a href='" . esc_url( add_query_arg( 'p', $post_id, admin_url( 'edit-comments.php' ) ) ) . "' title='" . esc_attr( $pending_phrase ) . "' class='post-com-count'><span class='comment-count'>" . number_format_i18n( get_comments_number() ) . "</span></a>";
    623 
    624         if ( $pending_comments )
    625             echo '</strong>';
     617        $approved_comments = get_comments_number();
     618
     619        $approved_comments_number = number_format_i18n( $approved_comments );
     620        $pending_comments_number = number_format_i18n( $pending_comments );
     621
     622        $approved_only_phrase = sprintf( _n( '%s comment', '%s comments', $approved_comments ), $approved_comments_number );
     623        $approved_phrase = sprintf( _n( '%s approved comment', '%s approved comments', $approved_comments ), $approved_comments_number );
     624        $pending_phrase = sprintf( _n( '%s pending comment', '%s pending comments', $pending_comments ), $pending_comments_number );
     625
     626        // No comments at all.
     627        if ( ! $approved_comments && ! $pending_comments ) {
     628            printf( '<span aria-hidden="true">—</span><span class="screen-reader-text">%s</span>',
     629                __( 'No comments' )
     630            );
     631        // Approved comments have different display depending on some conditions.
     632        } elseif ( $approved_comments ) {
     633            printf( '<a href="%s" class="post-com-count post-com-count-approved"><span class="comment-count-approved" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></a>',
     634                esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'approved' ), admin_url( 'edit-comments.php' ) ) ),
     635                $approved_comments_number,
     636                $pending_comments ? $approved_phrase : $approved_only_phrase
     637            );
     638        } else {
     639            printf( '<span class="post-com-count post-com-count-no-comments"><span class="comment-count comment-count-no-comments" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></span>',
     640                $approved_comments_number,
     641                $pending_comments ? __( 'No approved comments' ) : __( 'No comments' )
     642            );
     643        }
     644
     645        if ( $pending_comments ) {
     646            printf( '<a href="%s" class="post-com-count post-com-count-pending"><span class="comment-count-pending" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></a>',
     647                esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'moderated' ), admin_url( 'edit-comments.php' ) ) ),
     648                $pending_comments_number,
     649                $pending_phrase
     650            );
     651        }
    626652    }
    627653
Note: See TracChangeset for help on using the changeset viewer.