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.

git-svn-id: https://develop.svn.wordpress.org/trunk@36000 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2015-12-17 23:43:57 +00:00
parent e7417c56ce
commit 398a2996ae
2 changed files with 8 additions and 3 deletions

View File

@ -303,10 +303,16 @@ ul.wp-tab-bar li {
padding: 3px 5px 5px; padding: 3px 5px 5px;
} }
#set-post-thumbnail {
display: inline-block;
max-width: 100%;
}
#postimagediv .inside img { #postimagediv .inside img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
width: 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: -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); 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);
background-position: 0 0, 10px 10px; background-position: 0 0, 10px 10px;

View File

@ -1380,11 +1380,10 @@ function _wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
$post = get_post( $post ); $post = get_post( $post );
$post_type_object = get_post_type_object( $post->post_type ); $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 ); $upload_iframe_src = get_upload_iframe_src( 'image', $post->ID );
$content = sprintf( $set_thumbnail_link, $content = sprintf( $set_thumbnail_link,
esc_attr( $post_type_object->labels->set_featured_image ),
esc_url( $upload_iframe_src ), esc_url( $upload_iframe_src ),
esc_html( $post_type_object->labels->set_featured_image ) esc_html( $post_type_object->labels->set_featured_image )
); );
@ -1416,10 +1415,10 @@ function _wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
if ( !empty( $thumbnail_html ) ) { if ( !empty( $thumbnail_html ) ) {
$ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID ); $ajax_nonce = wp_create_nonce( 'set_post_thumbnail-' . $post->ID );
$content = sprintf( $set_thumbnail_link, $content = sprintf( $set_thumbnail_link,
esc_attr( $post_type_object->labels->set_featured_image ),
esc_url( $upload_iframe_src ), esc_url( $upload_iframe_src ),
$thumbnail_html $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>'; $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>';
} }
} }