Ticket #32152: 32152.patch

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

@@ -4 +4 @@
 }
 
 .post-com-count {
+        float: left;
         background: none;
         height: 1.3em;
         line-height: 1.1em;
-        display: block;
         text-decoration: none;
         padding: 0 0 6px;
-        cursor: pointer;
-        background-position: center -80px;
-        background-repeat: no-repeat;
         color: #fff;
+        text-align: center;
 }
 
-.post-com-count:after {         /* draw bubble connector using CSS! */
+.post-com-count:after {
         content: "";
         display: block;
         width: 0;
         height: 0;
         margin-left: 8px;
-        border-top: 5px solid #b4b9be;
+        border-top: 5px solid #767676;
         border-right: 5px solid transparent;
 }
 
-.post-com-count span {
+.post-com-count .comment-count {
         font-size: 11px;
         font-weight: 600;
-        height: 1.4em;
-        line-height: 1.4em;
-        min-width: 0.7em;
+        /* the following are calculated on the font size
+           and need 8 decimals to avoid different roundings in different browsers */
+        height: 1.45454545em;
+        line-height: 1.36363636;
+        min-width: 0.72727272em;
         padding: 0 6px;
-        display: inline-block;
+        display: block;
         -webkit-border-radius: 5px;
         border-radius: 5px;
-        background-color: #b4b9be;
+        background-color: #767676;
         color: #fff;
+        overflow: hidden;
 }
 
-.post-com-count:hover {
-        background-position: center -3px;
+a.post-com-count .comment-count {
+        background-color: #0073aa;
 }
 
-.post-com-count:hover span {
-        background-color: #00a0d2;
+a.post-com-count:after {
+        border-top: 5px solid #0073aa;
 }
 
-.post-com-count:hover:after {
-        border-top: 5px solid #00a0d2;
+.post-com-count .comment-count-no-comments {
+        background-color: #767676;
 }
 
-strong .post-com-count {
-        background-position: center -55px;
+.has-pending .post-com-count .comment-count {
+        padding: 0 4px;
 }
 
-strong .post-com-count span {
-        background-color: #0073aa;
+.post-com-count .comment-count-pending,
+.comment-count-sep {
+        display: none;
 }
 
-strong .post-com-count:after {
+.has-pending .post-com-count .comment-count-pending {
+        display: inline-block;
+        margin-left: 4px;
+        padding-left: 4px;
+        position: relative;
+        z-index: 1;
+}
+
+.post-com-count .comment-count-pending:before {
+        content: '';
+        display: block;
+        width: 100px;
+        height: 100px;
+        background: #c94e21;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+}
+
+.has-pending .post-com-count:after {
         border-top: 5px solid #0073aa;
 }
 

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

@@ -607 +607 @@
          * @param int $pending_comments Number of pending comments.
          */
         protected function comments_bubble( $post_id, $pending_comments ) {
-                $pending_phrase = sprintf( __( '%s pending' ), number_format( $pending_comments ) );
+                $approved_comments_number = number_format_i18n( get_comments_number() );
+                $pending_comments_number = number_format( $pending_comments );
+                $count_phrase = sprintf( __( '%s approved and %s pending comments' ), $approved_comments_number, $pending_comments_number );
 
-                if ( $pending_comments )
-                        echo '<strong>';
+                if ( $pending_comments ) {
+                        echo '<strong class="has-pending">';
+                }
 
-                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>";
+                // don't output a link if no comments
+                if ( ! $approved_comments_number && ! $pending_comments_number ) {
+                        printf( '<span class="post-com-count"><span class="comment-count comment-count-no-comments" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></span>',
+                                $approved_comments_number,
+                                $count_phrase
+                        );
+                } else {
+                        printf( '<a href="%s" aria-label="%s" class="post-com-count"><span class="comment-count">%s<span class="comment-count-sep">/</span><span class="comment-count-pending">%s</span></span></a>',
+                                esc_url( add_query_arg( 'p', $post_id, admin_url( 'edit-comments.php' ) ) ),
+                                esc_attr( $count_phrase ),
+                                $approved_comments_number,
+                                $pending_comments_number
+                        );
+                }
 
-                if ( $pending_comments )
+                if ( $pending_comments ) {
                         echo '</strong>';
+                }
         }
 
         /**