Changeset 36000

Timestamp:

12/17/2015 11:43:57 PM (9 years ago)

Author:

afercia

Message:

Accessibility: Remove the title attribute from the Featured Image postbox thumbnail.

The title attribute is now replaced with plain text in a howto paragraph, as done for example in the Tags postbox.
Adds an aria-describedby attribute on the thumbnail link to target the description.
Also, fixes the focus style on the featured image thumbnail.

Fixes #35076.

Location:

trunk/src/wp-admin

Files:

• css/edit.css (modified) (1 diff)
• includes/post.php (modified) (2 diffs)

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

@@ -304 +304 @@
 }
 
+#set-post-thumbnail {
+    display: inline-block;
+    max-width: 100%;
+}
+
 #postimagediv .inside img {
     max-width: 100%;
     height: auto;
     width: auto;
+    vertical-align: top;
     background-image: -webkit-linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), -webkit-linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4);
     background-image: linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4), linear-gradient(45deg, #c4c4c4 25%, transparent 25%, transparent 75%, #c4c4c4 75%, #c4c4c4);

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

@@ -1381 +1381 @@
     $post               = get_post( $post );
     $post_type_object   = get_post_type_object( $post->post_type );
-    $set_thumbnail_link = '<p class="hide-if-no-js"><a title="%s" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>';
+    $set_thumbnail_link = '<p class="hide-if-no-js"><a href="%s" id="set-post-thumbnail" aria-describedby="set-post-thumbnail-desc" class="thickbox">%s</a></p>';
     $upload_iframe_src  = get_upload_iframe_src( 'image', $post->ID );
 
     $content = sprintf( $set_thumbnail_link,
-        esc_attr( $post_type_object->labels->set_featured_image ),
         esc_url( $upload_iframe_src ),
         esc_html( $post_type_object->labels->set_featured_image )
@@ -1417 +1416 @@
             $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
             $content = sprintf( $set_thumbnail_link,
-                esc_attr( $post_type_object->labels->set_featured_image ),
                 esc_url( $upload_iframe_src ),
                 $thumbnail_html
             );
+            $content .= '<p class="hide-if-no-js howto" id="set-post-thumbnail-desc">' . __( 'Click the image to edit or update' ) . '</p>';
             $content .= '<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\'' . $ajax_nonce . '\');return false;">' . esc_html( $post_type_object->labels->remove_featured_image ) . '</a></p>';
         }