Changeset 36683

Timestamp:

02/24/16 16:06:05 (4 weeks 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:

• css/dashboard.css (modified) (3 diffs)
• css/list-tables.css (modified) (1 diff)
• includes/dashboard.php (modified) (6 diffs)

trunk/src/wp-admin/css/dashboard.css

@@ -590 +590 @@
     content: "\f227";
     font: 20px/.5 dashicons;
-    margin-left: 12px;
+    margin-left: 5px;
     vertical-align: middle;
     position: relative;
@@ -694 +694 @@
 #activity-widget #the-comment-list .avatar {
     position: absolute;
-    top: 13px;
+    top: 12px;
 }
 
@@ -807 +807 @@
 
 #activity-widget #latest-comments #the-comment-list .comment-item {
-    padding: 1em 12px;
+    /* the row-actions paragraph is output only for users with 'edit_comment' capabilities,
+       for other users this needs a min height equal to the gravatar image */
+    min-height: 50px;
+    margin: 0;
+    padding: 12px;
 }
 

trunk/src/wp-admin/css/list-tables.css

@@ -897 +897 @@
 .mobile .row-actions,
 .row-actions.visible,
-div.comment-item:hover .row-actions {
+.comment-item:hover .row-actions {
     position: static;
 }

trunk/src/wp-admin/includes/dashboard.php

@@ -584 +584 @@
     $GLOBALS['comment'] = clone $comment;
 
-    if ( $comment->comment_post_ID > 0 && current_user_can( 'edit_post', $comment->comment_post_ID ) ) {
+    if ( $comment->comment_post_ID > 0 ) {
+
         $comment_post_title = _draft_or_post_title( $comment->comment_post_ID );
-        $comment_post_url = get_edit_post_link( $comment->comment_post_ID );
+        $comment_post_url = get_the_permalink( $comment->comment_post_ID );
         $comment_post_link = "<a href='$comment_post_url'>$comment_post_title</a>";
     } else {
@@ -654 +655 @@
         }
     }
-
 ?>
 
-        <div id="comment-<?php echo $comment->comment_ID; ?>" <?php comment_class( array( 'comment-item', wp_get_comment_status( $comment ) ), $comment ); ?>>
+        <li id="comment-<?php echo $comment->comment_ID; ?>" <?php comment_class( array( 'comment-item', wp_get_comment_status( $comment ) ), $comment ); ?>>
 
             <?php echo get_avatar( $comment, 50, 'mystery' ); ?>
@@ -665 +665 @@
             <div class="dashboard-comment-wrap has-row-actions">
             <p class="comment-meta">
-                <?php
+            <?php
+                // Comments might not have a post they relate to, e.g. programmatically created ones.
                 if ( $comment_post_link ) {
                     printf(
                         /* translators: 1: comment author, 2: post link, 3: notification if the comment is pending */
-                        __( 'From %1$s on %2$s%3$s' ),
+                        __( 'From %1$s on %2$s %3$s' ),
                         '<cite class="comment-author">' . get_comment_author_link( $comment ) . '</cite>',
                         $comment_post_link,
-                        ' <span class="approve">' . __( '[Pending]' ) . '</span>'
+                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
                     );
                 } else {
@@ -679 +680 @@
                         __( 'From %1$s %2$s' ),
                         '<cite class="comment-author">' . get_comment_author_link( $comment ) . '</cite>',
-                        ' <span class="approve">' . __( '[Pending]' ) . '</span>'
+                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
                     );
                 }
-                ?>
+            ?>
             </p>
 
@@ -700 +701 @@
             ?>
             <div class="dashboard-comment-wrap has-row-actions">
-            <?php /* translators: %1$s is type of comment, %2$s is link to the post */ ?>
-            <p class="comment-meta"><?php printf( _x( '%1$s on %2$s', 'dashboard' ), "<strong>$type</strong>", $comment_post_link ); ?></p>
+            <p class="comment-meta">
+            <?php
+                // Pingbacks, Trackbacks or custom comment types might not have a post they relate to, e.g. programmatically created ones.
+                if ( $comment_post_link ) {
+                    printf(
+                        /* translators: 1: type of comment, 2: post link, 3: notification if the comment is pending */
+                        _x( '%1$s on %2$s %3$s', 'dashboard' ),
+                        "<strong>$type</strong>",
+                        $comment_post_link,
+                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
+                    );
+                } else {
+                    printf(
+                        /* translators: 1: type of comment, 2: notification if the comment is pending */
+                        _x( '%1$s', 'dashboard' ),
+                        "<strong>$type</strong>",
+                        '<span class="approve">' . __( '[Pending]' ) . '</span>'
+                    );
+                }
+            ?>
+            </p>
             <p class="comment-author"><?php comment_author_link( $comment ); ?></p>
 
             <?php endif; // comment_type ?>
             <blockquote><p><?php comment_excerpt( $comment ); ?></p></blockquote>
+            <?php if ( $actions_string ) : ?>
             <p class="row-actions"><?php echo $actions_string; ?></p>
+            <?php endif; ?>
             </div>
-        </div>
+        </li>
 <?php
     $GLOBALS['comment'] = null;
@@ -878 +900 @@
     if ( $comments ) {
         echo '<div id="latest-comments" class="activity-block">';
-        echo '<h3>' . __( 'Comments' ) . '</h3>';
-
-        echo '<div id="the-comment-list" data-wp-lists="list:comment">';
+        echo '<h3>' . __( 'Recent Comments' ) . '</h3>';
+
+        echo '<ul id="the-comment-list" data-wp-lists="list:comment">';
         foreach ( $comments as $comment )
             _wp_dashboard_recent_comments_row( $comment );
-        echo '</div>';
-
-        if ( current_user_can('edit_posts') )
-            _get_list_table('WP_Comments_List_Table')->views();
+        echo '</ul>';
+
+        if ( current_user_can( 'edit_posts' ) ) {
+            echo '<h3 class="screen-reader-text">' . __( 'View more comments' ) . '</h3>';
+            _get_list_table( 'WP_Comments_List_Table' )->views();
+        }
 
         wp_comment_reply( -1, false, 'dashboard', false );