Playlist: Add aria-label to prevent placeholder as label

packages/block-library/src/playlist-track/edit.js

@@ -270,6 +270,7 @@ const PlaylistTrackEdit = ( {
 							tagName="span"
 							className="wp-block-playlist-track__title"
 							value={ title }
+							aria-label={ __( 'Track title' ) }
 							placeholder={ __( 'Add title' ) }
 							onChange={ ( value ) => {
 								setAttributes( { title: value } );
@@ -281,6 +282,7 @@ const PlaylistTrackEdit = ( {
 								tagName="span"
 								className="wp-block-playlist-track__artist"
 								value={ artist }
+								aria-label={ __( 'Track artist' ) }
 								placeholder={ __( 'Add artist' ) }
 								onChange={ ( value ) =>
 									setAttributes( { artist: value } )

packages/block-library/src/playlist-track/test/edit.js

@@ -6,44 +6,43 @@ import { useUploadMediaFromBlobURL } from '../../utils/hooks';
 
 let mockMediaReplaceFlowProps;
 
-jest.mock( '@wordpress/block-editor', () => ( {
-	BlockControls: ( { children } ) => <div>{ children }</div>,
-	BlockIcon: () => <span />,
-	InspectorControls: ( { children } ) => <div>{ children }</div>,
-	MediaPlaceholder: () => <div />,
-	MediaReplaceFlow: ( props ) => {
-		mockMediaReplaceFlowProps = props;
-		const { name, onSelect } = props;
-		return <button onClick={ () => onSelect( {} ) }>{ name }</button>;
-	},
-	MediaUpload: ( { render: renderMediaUpload } ) =>
-		renderMediaUpload( { open: jest.fn() } ),
-	MediaUploadCheck: ( { children } ) => <div>{ children }</div>,
-	PlainText: ( {
-		onChange,
-		placeholder,
-		tagName: TagName = 'div',
-		value,
-		__experimentalVersion,
-		...props
-	} ) => <TagName { ...props }>{ value || placeholder }</TagName>,
-	useBlockProps: jest.fn( () => ( {} ) ),
-} ) );
+jest.mock( '@wordpress/block-editor', () => {
+	const PlainText = jest.requireActual(
+		'../../../../block-editor/src/components/plain-text'
+	).default;
+
+	return {
+		BlockControls: ( { children } ) => <div>{ children }</div>,
+		BlockIcon: () => <span />,
+		InspectorControls: ( { children } ) => <div>{ children }</div>,
+		MediaPlaceholder: () => <div />,
+		MediaReplaceFlow: ( props ) => {
+			mockMediaReplaceFlowProps = props;
+			const { name, onSelect } = props;
+			return <button onClick={ () => onSelect( {} ) }>{ name }</button>;
+		},
+		MediaUpload: ( { render: renderMediaUpload } ) =>
+			renderMediaUpload( { open: jest.fn() } ),
+		MediaUploadCheck: ( { children } ) => <div>{ children }</div>,
+		PlainText,
+		useBlockProps: jest.fn( () => ( {} ) ),
+	};
+} );
 
-jest.mock( '@wordpress/data', () => ( {
-	useDispatch: jest.fn(),
-	combineReducers: jest.fn( ( reducers ) => ( state = {}, action ) => {
-		const newState = {};
-		Object.keys( reducers ).forEach( ( key ) => {
-			newState[ key ] = reducers[ key ]( state[ key ], action );
-		} );
-		return newState;
-	} ),
-	createRegistrySelector: jest.fn( ( fn ) => fn ),
-	createReduxStore: jest.fn( () => ( {} ) ),
-	createSelector: jest.fn( ( fn ) => fn ),
-	register: jest.fn(),
-} ) );
+jest.mock( '@wordpress/data', () => {
+	const data = jest.requireActual( '@wordpress/data' );
+	const mockUseDispatch = jest.fn();
+
+	return new Proxy( data, {
+		get( target, property ) {
+			if ( property === 'useDispatch' ) {
+				return mockUseDispatch;
+			}
+
+			return target[ property ];
+		},
+	} );
+} );
 
 jest.mock( '@wordpress/notices', () => ( {
 	store: 'core/notices',