Media: Add `aria-describedby` to `img_caption_shortcode()` output to improve image/caption relationship.

Props joedolson.
Fixes #34595.

git-svn-id: https://develop.svn.wordpress.org/trunk@42691 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Sergey Biryukov 2018-02-11 14:43:40 +00:00
parent 2b08bfb954
commit 10ee22ee46
1 changed files with 11 additions and 5 deletions

View File

@ -1557,9 +1557,12 @@ function img_caption_shortcode( $attr, $content = null ) {
} }
if ( ! empty( $atts['id'] ) ) { if ( ! empty( $atts['id'] ) ) {
$atts['id'] = 'id="' . esc_attr( sanitize_html_class( $atts['id'] ) ) . '" '; $att_id = esc_attr( sanitize_html_class( $atts['id'] ) );
$atts['id'] = 'id="' . $att_id . '" ';
} }
$caption_id = 'caption-' . str_replace( '_', '-', $att_id );
$class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] ); $class = trim( 'wp-caption ' . $atts['align'] . ' ' . $atts['class'] );
$html5 = current_theme_supports( 'html5', 'caption' ); $html5 = current_theme_supports( 'html5', 'caption' );
@ -1590,13 +1593,15 @@ function img_caption_shortcode( $attr, $content = null ) {
if ( $html5 ) { if ( $html5 ) {
$html = sprintf( $html = sprintf(
'<figure %s%sclass="%s">%s%s</figure>', '<figure %s%sclass="%s" aria-describedby="%s">%s%s</figure>',
$atts['id'], $atts['id'],
$style, $style,
esc_attr( $class ), esc_attr( $class ),
$caption_id,
do_shortcode( $content ), do_shortcode( $content ),
sprintf( sprintf(
'<figcaption class="wp-caption-text">%s</figcaption>', '<figcaption id="%s" class="wp-caption-text">%s</figcaption>',
$caption_id,
$atts['caption'] $atts['caption']
) )
); );
@ -1606,9 +1611,10 @@ function img_caption_shortcode( $attr, $content = null ) {
$atts['id'], $atts['id'],
$style, $style,
esc_attr( $class ), esc_attr( $class ),
do_shortcode( $content ), str_replace( '<img ', '<img aria-describedby="' . $caption_id . '" ', do_shortcode( $content ) ),
sprintf( sprintf(
'<p class="wp-caption-text">%s</p>', '<p id="%s" class="wp-caption-text">%s</p>',
$caption_id,
$atts['caption'] $atts['caption']
) )
); );