Changeset 42691

Timestamp:

02/11/2018 02:43:40 PM (9 years ago)

Author:

SergeyBiryukov

Message:

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

Props joedolson.
Fixes #34595.

File:

• trunk/src/wp-includes/media.php (modified) (3 diffs)

trunk/src/wp-includes/media.php

@@ -1558 +1558 @@
 
         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'] );
@@ -1591 +1594 @@
         if ( $html5 ) {
                 $html = sprintf(
-                        '<figure %s%sclass="%s">%s%s</figure>',
+                        '<figure %s%sclass="%s" aria-describedby="%s">%s%s</figure>',
                         $atts['id'],
                         $style,
                         esc_attr( $class ),
+                        $caption_id,
                         do_shortcode( $content ),
                         sprintf(
-                                '<figcaption class="wp-caption-text">%s</figcaption>',
+                                '<figcaption id="%s" class="wp-caption-text">%s</figcaption>',
+                                $caption_id,
                                 $atts['caption']
                         )
@@ -1607 +1612 @@
                         $style,
                         esc_attr( $class ),
-                        do_shortcode( $content ),
+                        str_replace( '<img ', '<img aria-describedby="' . $caption_id . '" ', do_shortcode( $content ) ),
                         sprintf(
-                                '<p class="wp-caption-text">%s</p>',
+                                '<p id="%s" class="wp-caption-text">%s</p>',
+                                $caption_id,
                                 $atts['caption']
                         )