WordPress.org

Make WordPress Core

Changeset 36683


Ignore:
Timestamp:
02/24/2016 04:06:05 PM (6 years ago)
Author:
afercia
Message:

Accessibility: improve accessibility of the Dashboard "Recent Comments" widget.

  • Makes the list of comments a list
  • Always displays the title of the post the comment relates to, linked to the post itself and no more to the Edit screen
  • Headings: changes the visible one in "Recent Comments" and adds a hidden "View more comments" heading before the views links
  • Adds the pending status indicator to Pingbacks and Trackbacks

Props rachelbaker, afercia.

Fixes #35392.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/dashboard.css

    r36587 r36683  
    590590    content: "\f227";
    591591    font: 20px/.5 dashicons;
    592     margin-left: 12px;
     592    margin-left: 5px;
    593593    vertical-align: middle;
    594594    position: relative;
     
    694694#activity-widget #the-comment-list .avatar {
    695695    position: absolute;
    696     top: 13px;
     696    top: 12px;
    697697}
    698698
     
    807807
    808808#activity-widget #latest-comments #the-comment-list .comment-item {
    809     padding: 1em 12px;
     809    /* the row-actions paragraph is output only for users with 'edit_comment' capabilities,
     810       for other users this needs a min height equal to the gravatar image */
     811    min-height: 50px;
     812    margin: 0;
     813    padding: 12px;
    810814}
    811815
  • trunk/src/wp-admin/css/list-tables.css

    r36587 r36683  
    897897.mobile .row-actions,
    898898.row-actions.visible,
    899 div.comment-item:hover .row-actions {
     899.comment-item:hover .row-actions {
    900900    position: static;
    901901}
  • trunk/src/wp-admin/includes/dashboard.php

    r36474 r36683  
    584584    $GLOBALS['comment'] = clone $comment;
    585585
    586     if ( $comment->comment_post_ID > 0 && current_user_can( 'edit_post', $comment->comment_post_ID ) ) {
     586    if ( $comment->comment_post_ID > 0 ) {
     587
    587588        $comment_post_title = _draft_or_post_title( $comment->comment_post_ID );
    588         $comment_post_url = get_edit_post_link( $comment->comment_post_ID );
     589        $comment_post_url = get_the_permalink( $comment->comment_post_ID );
    589590        $comment_post_link = "<a href='$comment_post_url'>$comment_post_title</a>";
    590591    } else {
     
    654655        }
    655656    }
    656 
    657657?>
    658658
    659         <div id="comment-<?php echo $comment->comment_ID; ?>" <?php comment_class( array( 'comment-item', wp_get_comment_status( $comment ) ), $comment ); ?>>
     659        <li id="comment-<?php echo $comment->comment_ID; ?>" <?php comment_class( array( 'comment-item', wp_get_comment_status( $comment ) ), $comment ); ?>>
    660660
    661661            <?php echo get_avatar( $comment, 50, 'mystery' ); ?>
     
    665665            <div class="dashboard-comment-wrap has-row-actions">
    666666            <p class="comment-meta">
    667                 <?php
     667            <?php
     668                // Comments might not have a post they relate to, e.g. programmatically created ones.
    668669                if ( $comment_post_link ) {
    669670                    printf(
    670671                        /* translators: 1: comment author, 2: post link, 3: notification if the comment is pending */
    671                         __( 'From %1$s on %2$s%3$s' ),
     672                        __( 'From %1$s on %2$s %3$s' ),
    672673                        '<cite class="comment-author">' . get_comment_author_link( $comment ) . '</cite>',
    673674                        $comment_post_link,
    674                         ' <span class="approve">' . __( '[Pending]' ) . '</span>'
     675                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
    675676                    );
    676677                } else {
     
    679680                        __( 'From %1$s %2$s' ),
    680681                        '<cite class="comment-author">' . get_comment_author_link( $comment ) . '</cite>',
    681                         ' <span class="approve">' . __( '[Pending]' ) . '</span>'
     682                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
    682683                    );
    683684                }
    684                 ?>
     685            ?>
    685686            </p>
    686687
     
    700701            ?>
    701702            <div class="dashboard-comment-wrap has-row-actions">
    702             <?php /* translators: %1$s is type of comment, %2$s is link to the post */ ?>
    703             <p class="comment-meta"><?php printf( _x( '%1$s on %2$s', 'dashboard' ), "<strong>$type</strong>", $comment_post_link ); ?></p>
     703            <p class="comment-meta">
     704            <?php
     705                // Pingbacks, Trackbacks or custom comment types might not have a post they relate to, e.g. programmatically created ones.
     706                if ( $comment_post_link ) {
     707                    printf(
     708                        /* translators: 1: type of comment, 2: post link, 3: notification if the comment is pending */
     709                        _x( '%1$s on %2$s %3$s', 'dashboard' ),
     710                        "<strong>$type</strong>",
     711                        $comment_post_link,
     712                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
     713                    );
     714                } else {
     715                    printf(
     716                        /* translators: 1: type of comment, 2: notification if the comment is pending */
     717                        _x( '%1$s', 'dashboard' ),
     718                        "<strong>$type</strong>",
     719                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
     720                    );
     721                }
     722            ?>
     723            </p>
    704724            <p class="comment-author"><?php comment_author_link( $comment ); ?></p>
    705725
    706726            <?php endif; // comment_type ?>
    707727            <blockquote><p><?php comment_excerpt( $comment ); ?></p></blockquote>
     728            <?php if ( $actions_string ) : ?>
    708729            <p class="row-actions"><?php echo $actions_string; ?></p>
     730            <?php endif; ?>
    709731            </div>
    710         </div>
     732        </li>
    711733<?php
    712734    $GLOBALS['comment'] = null;
     
    878900    if ( $comments ) {
    879901        echo '<div id="latest-comments" class="activity-block">';
    880         echo '<h3>' . __( 'Comments' ) . '</h3>';
    881 
    882         echo '<div id="the-comment-list" data-wp-lists="list:comment">';
     902        echo '<h3>' . __( 'Recent Comments' ) . '</h3>';
     903
     904        echo '<ul id="the-comment-list" data-wp-lists="list:comment">';
    883905        foreach ( $comments as $comment )
    884906            _wp_dashboard_recent_comments_row( $comment );
    885         echo '</div>';
    886 
    887         if ( current_user_can('edit_posts') )
    888             _get_list_table('WP_Comments_List_Table')->views();
     907        echo '</ul>';
     908
     909        if ( current_user_can( 'edit_posts' ) ) {
     910            echo '<h3 class="screen-reader-text">' . __( 'View more comments' ) . '</h3>';
     911            _get_list_table( 'WP_Comments_List_Table' )->views();
     912        }
    889913
    890914        wp_comment_reply( -1, false, 'dashboard', false );
Note: See TracChangeset for help on using the changeset viewer.