Changeset 38965

Timestamp:

10/26/2016 05:58:34 PM (8 years ago)

Author:

afercia

Message:

Administration: Better accessibility for the "Post locked" indicator.

• hides the locked icon from assistive technologies
• adds hidden text to indicate the post is locked
• moves the info about who's currently editing to the top of the title table cell

Props mariovalney.
Fixes #38185.

Location:

trunk/src/wp-admin

Files:

• css/list-tables.css (modified) (2 diffs)
• includes/class-wp-posts-list-table.php (modified) (4 diffs)

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

@@ -556 +556 @@
 }
 
-tr.wp-locked .locked-indicator:before {
+tr.wp-locked .locked-indicator-icon:before {
     color: #82878c;
     content: "\f160";
     display: inline-block;
-    float: left;
     font: normal 20px/1 dashicons;
     speak: none;
     vertical-align: middle;
-    margin-left: 0;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -582 +580 @@
 
 tr.wp-locked .locked-info {
-    margin-top: 8px;
+    margin-top: 4px;
     height: auto;
     opacity: 1;

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

@@ -836 +836 @@
             ?></label>
             <input id="cb-select-<?php the_ID(); ?>" type="checkbox" name="post[]" value="<?php the_ID(); ?>" />
-            <div class="locked-indicator"></div>
+            <div class="locked-indicator">
+                <span class="locked-indicator-icon" aria-hidden="true"></span>
+                <span class="screen-reader-text"><?php
+                printf(
+                    /* translators: %s: post title */
+                    __( '&#8220;%s&#8221; is locked' ),
+                    _draft_or_post_title()
+                );
+                ?></span>
+            </div>
         <?php endif;
     }
@@ -891 +900 @@
         }
 
+        $can_edit_post = current_user_can( 'edit_post', $post->ID );
+
+        if ( $can_edit_post && $post->post_status != 'trash' ) {
+            $lock_holder = wp_check_post_lock( $post->ID );
+
+            if ( $lock_holder ) {
+                $lock_holder = get_userdata( $lock_holder );
+                $locked_avatar = get_avatar( $lock_holder->ID, 18 );
+                $locked_text = esc_html( sprintf( __( '%s is currently editing' ), $lock_holder->display_name ) );
+            } else {
+                $locked_avatar = $locked_text = '';
+            }
+
+            echo '<div class="locked-info"><span class="locked-avatar">' . $locked_avatar . '</span> <span class="locked-text">' . $locked_text . "</span></div>\n";
+        }
+
         $pad = str_repeat( '&#8212; ', $this->current_level );
         echo "<strong>";
@@ -908 +933 @@
         }
 
-        $can_edit_post = current_user_can( 'edit_post', $post->ID );
         $title = _draft_or_post_title();
 
@@ -930 +954 @@
         }
         echo "</strong>\n";
-
-        if ( $can_edit_post && $post->post_status != 'trash' ) {
-            $lock_holder = wp_check_post_lock( $post->ID );
-
-            if ( $lock_holder ) {
-                $lock_holder = get_userdata( $lock_holder );
-                $locked_avatar = get_avatar( $lock_holder->ID, 18 );
-                $locked_text = esc_html( sprintf( __( '%s is currently editing' ), $lock_holder->display_name ) );
-            } else {
-                $locked_avatar = $locked_text = '';
-            }
-
-            echo '<div class="locked-info"><span class="locked-avatar">' . $locked_avatar . '</span> <span class="locked-text">' . $locked_text . "</span></div>\n";
-        }
 
         if ( ! is_post_type_hierarchical( $this->screen->post_type ) && 'excerpt' === $mode && current_user_can( 'read_post', $post->ID ) ) {