Update a11y based on feedback

WordPress · Sep 14, 2023 · d1b7787 · d1b7787
1 parent 0e18b03
commit d1b7787
Showing 1 changed file with 10 additions and 17 deletions.
diff --git 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,14 +122,20 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 					>
 						{ imgLabel }
 					</Truncate>
+					<VisuallyHidden as="span">
+						{ sprintf(
+							/* translators: %s: file name */
+							__( 'Selected image: %s' ),
+							filename
+						) }
+					</VisuallyHidden>
 				</FlexItem>
 			</HStack>
 		</ItemGroup>
 	);
 }
 
 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' ) }