Add aria-describedby if image has no alt but has caption

packages/block-library/src/gallery/test/__snapshots__/index.native.js.snap

@@ -121,7 +121,7 @@ exports[`Gallery block sets caption to gallery 1`] = `
 exports[`Gallery block sets caption to gallery items 1`] = `
 "<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->
 <figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":2000} -->
-<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
+<figure class=\\"wp-block-image\\"><img src=\\"https://test-site.files.wordpress.com/local-image-1.jpeg\\" alt=\\"\\" aria-describedby=\\"wp-image-caption-2000\\" class=\\"wp-image-2000\\"/><figcaption class=\\"wp-element-caption\\" id=\\"wp-image-caption-2000\\"><strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption</figcaption></figure>
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->"
 `;

packages/block-library/src/image/image.js

@@ -332,6 +332,8 @@ export default function Image( {
 		);
 	}
 
+	const describedById = `wp-image-caption-${ id }`;
+
 	const controls = (
 		<>
 			<BlockControls group="block">
@@ -368,6 +370,11 @@ export default function Image( {
 						linkTarget={ linkTarget }
 						linkClass={ linkClass }
 						rel={ rel }
+						aria-describedby={
+							! alt && ! RichText.isEmpty( caption )
+								? describedById
+								: undefined
+						}
 					/>
 				) }
 				{ allowCrop && (
@@ -489,6 +496,11 @@ export default function Image( {
 			<img
 				src={ temporaryURL || url }
 				alt={ defaultedAlt }
+				aria-describedby={
+					! alt && ! RichText.isEmpty( caption )
+						? describedById
+						: undefined
+				}
 				onError={ () => onImageError() }
 				onLoad={ ( event ) => {
 					setLoadedNaturalSize( {
@@ -641,6 +653,11 @@ export default function Image( {
 						aria-label={ __( 'Image caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }
+						id={
+							! alt && ! RichText.isEmpty( caption )
+								? describedById
+								: undefined
+						}
 						onChange={ ( value ) =>
 							setAttributes( { caption: value } )
 						}

packages/block-library/src/image/save.js

@@ -46,10 +46,17 @@ export default function save( { attributes } ) {
 		[ `wp-image-${ id }` ]: !! id,
 	} );
 
+	const describedById = `wp-image-caption-${ id }`;
+
 	const image = (
 		<img
 			src={ url }
 			alt={ alt }
+			aria-describedby={
+				! alt && ! RichText.isEmpty( caption )
+					? describedById
+					: undefined
+			}
 			className={ imageClasses || undefined }
 			style={ borderProps.style }
 			width={ width }
@@ -66,6 +73,11 @@ export default function save( { attributes } ) {
 					href={ href }
 					target={ linkTarget }
 					rel={ newRel }
+					aria-describedby={
+						! alt && ! RichText.isEmpty( caption )
+							? describedById
+							: undefined
+					}
 				>
 					{ image }
 				</a>
@@ -77,6 +89,11 @@ export default function save( { attributes } ) {
 					className={ __experimentalGetElementClassName( 'caption' ) }
 					tagName="figcaption"
 					value={ caption }
+					id={
+						! alt && ! RichText.isEmpty( caption )
+							? describedById
+							: undefined
+					}
 				/>
 			) }
 		</>

packages/block-library/src/image/test/edit.native.js

@@ -73,9 +73,9 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<a href="https://cldup.com/cXyG__fTLN.jpg">
-				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
 			</a>
-		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -91,7 +91,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'None' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -100,8 +100,8 @@ describe( 'Image Block', () => {
 		const initialHtml = `
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
-			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
+		<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -117,7 +117,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/></a><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -126,8 +126,8 @@ describe( 'Image Block', () => {
 		const initialHtml = `
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
-			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
+		<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -153,7 +153,7 @@ describe( 'Image Block', () => {
 		);
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/></a><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -162,8 +162,8 @@ describe( 'Image Block', () => {
 		const initialHtml = `
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
-			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
-		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
+		<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -193,7 +193,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/></a><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -203,9 +203,9 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<a href="https://cldup.com/cXyG__fTLN.jpg">
-				<img src="https://cldup.com/cXyG__fTLN.jpg?w=683" alt="" class="wp-image-1"/>
+				<img src="https://cldup.com/cXyG__fTLN.jpg?w=683" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
 			</a>
-		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -227,9 +227,9 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<a href="https://wordpress.org">
-				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
 			</a>
-		<figcaption class="wp-element-caption">Mountain</figcaption></figure>
+		<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 		// We must await the image fetch via `getMedia`
@@ -247,7 +247,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/></a><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
@@ -257,9 +257,9 @@ describe( 'Image Block', () => {
 		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
 		<figure class="wp-block-image size-large is-style-default">
 			<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">
-				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/>
 			</a>
-			<figcaption class="wp-element-caption">Mountain</figcaption>
+			<figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption>
 		</figure>
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
@@ -278,7 +278,7 @@ describe( 'Image Block', () => {
 		fireEvent.press( linkTargetButton );
 
 		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
-<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption class="wp-element-caption">Mountain</figcaption></figure>
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" aria-describedby="wp-image-caption-1" class="wp-image-1"/></a><figcaption class="wp-element-caption" id="wp-image-caption-1">Mountain</figcaption></figure>
 <!-- /wp:image -->`;
 		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );

test/integration/__snapshots__/blocks-raw-handling.test.js.snap

@@ -109,13 +109,13 @@ exports[`rawHandler should convert HTML post to blocks with minimal content chan
 
 exports[`rawHandler should convert a caption shortcode 1`] = `
 "<!-- wp:image {\\"align\\":\\"none\\",\\"id\\":122,\\"className\\":\\"size-medium wp-image-122\\"} -->
-<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" class=\\"wp-image-122\\"/><figcaption class=\\"wp-element-caption\\">test</figcaption></figure>
+<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" aria-describedby=\\"wp-image-caption-122\\" class=\\"wp-image-122\\"/><figcaption class=\\"wp-element-caption\\" id=\\"wp-image-caption-122\\">test</figcaption></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`rawHandler should convert a caption shortcode with caption 1`] = `
 "<!-- wp:image {\\"align\\":\\"none\\",\\"id\\":122,\\"className\\":\\"size-medium wp-image-122\\"} -->
-<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" class=\\"wp-image-122\\"/><figcaption class=\\"wp-element-caption\\"><a href=\\"https://w.org\\">test</a></figcaption></figure>
+<figure class=\\"wp-block-image alignnone size-medium wp-image-122\\"><img src=\\"image.png\\" alt=\\"\\" aria-describedby=\\"wp-image-caption-122\\" class=\\"wp-image-122\\"/><figcaption class=\\"wp-element-caption\\" id=\\"wp-image-caption-122\\"><a href=\\"https://w.org\\">test</a></figcaption></figure>
 <!-- /wp:image -->"
 `;
 

test/integration/fixtures/blocks/core__image__center-caption.html

@@ -1,3 +1,3 @@
 <!-- wp:core/image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" /><figcaption class="wp-element-caption">Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>
+<figure class="wp-block-image aligncenter"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption id="wp-image-caption-undefined" class="wp-element-caption">Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>
 <!-- /wp:core/image -->

test/integration/fixtures/blocks/core__image__center-caption.parsed.json

@@ -5,9 +5,9 @@
 			"align": "center"
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<figure class=\"wp-block-image aligncenter\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" /><figcaption class=\"wp-element-caption\">Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>\n",
+		"innerHTML": "\n<figure class=\"wp-block-image aligncenter\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" aria-describedby=\"wp-image-caption-undefined\"/><figcaption id=\"wp-image-caption-undefined\" class=\"wp-element-caption\">Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>\n",
 		"innerContent": [
-			"\n<figure class=\"wp-block-image aligncenter\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" /><figcaption class=\"wp-element-caption\">Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>\n"
+			"\n<figure class=\"wp-block-image aligncenter\"><img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==\" alt=\"\" aria-describedby=\"wp-image-caption-undefined\"/><figcaption id=\"wp-image-caption-undefined\" class=\"wp-element-caption\">Give it a try. Press the &quot;really wide&quot; button on the image toolbar.</figcaption></figure>\n"
 		]
 	}
 ]

test/integration/fixtures/blocks/core__image__center-caption.serialized.html

@@ -1,3 +1,3 @@
 <!-- wp:image {"align":"center"} -->
-<figure class="wp-block-image aligncenter"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt=""/><figcaption class="wp-element-caption">Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure>
+<figure class="wp-block-image aligncenter"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" alt="" aria-describedby="wp-image-caption-undefined"/><figcaption class="wp-element-caption" id="wp-image-caption-undefined">Give it a try. Press the "really wide" button on the image toolbar.</figcaption></figure>
 <!-- /wp:image -->