From 10ee22ee46314a99fcee9feb3c7806f187ecb226 Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Sun, 11 Feb 2018 14:43:40 +0000
Subject: [PATCH] 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
---
 src/wp-includes/media.php | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 24c370769d..4a97f445ef 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -1557,9 +1557,12 @@ function img_caption_shortcode( $attr, $content = null ) {
 	}
 
 	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'] );
 
 	$html5 = current_theme_supports( 'html5', 'caption' );
@@ -1590,13 +1593,15 @@ function img_caption_shortcode( $attr, $content = null ) {
 
 	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']
 			)
 		);
@@ -1606,9 +1611,10 @@ function img_caption_shortcode( $attr, $content = null ) {
 			$atts['id'],
 			$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']
 			)
 		);