From d1b77874749133b053dac302ba65058629e9d4e1 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 13 Sep 2023 20:12:21 -0400
Subject: [PATCH] Update a11y based on feedback

---
 packages/block-editor/src/hooks/background.js | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
index b9658ca05ee2b..4554c150a1529 100644
--- a/packages/block-editor/src/hooks/background.js
+++ b/packages/block-editor/src/hooks/background.js
@@ -19,7 +19,6 @@ import { Platform, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -113,12 +112,6 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 							style={ {
 								backgroundImage: `url(${ imgUrl })`,
 							} }
-							// eslint-disable-next-line jsx-a11y/aria-props
-							aria-description={ sprintf(
-								/* translators: %s: file name */
-								__( 'This background image file name is %s' ),
-								filename
-							) }
 						/>
 					) }
 				</span>
@@ -129,6 +122,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 					>
 						{ imgLabel }
 					</Truncate>
+					<VisuallyHidden as="span">
+						{ sprintf(
+							/* translators: %s: file name */
+							__( 'Selected image: %s' ),
+							filename
+						) }
+					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
 		</ItemGroup>
@@ -136,7 +136,6 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 }
 
 function BackgroundImagePanelItem( props ) {
-	const instanceId = useInstanceId( BackgroundImagePanelItem );
 	const { attributes, clientId, setAttributes } = props;
 
 	const { id, title, url } =
@@ -274,17 +273,11 @@ function BackgroundImagePanelItem( props ) {
 							allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }
 							render={ ( { open } ) => (
 								<div className="block-editor-hooks__background__inspector-upload-container">
-									<VisuallyHidden
-										as="span"
-										id={ `block-editor-hooks__background__inspector-empty-state-${ instanceId }` }
-									>
-										{ __(
-											'No background image selected. Open Media Library to select an image.'
-										) }
-									</VisuallyHidden>
 									<Button
 										onClick={ open }
-										id={ `block-editor-hooks__background__inspector-empty-state-${ instanceId }` }
+										aria-label={ __(
+											'Background image style'
+										) }
 									>
 										<InspectorImagePreview
 											label={ __( 'Background image' ) }