[a11y] Fix: Media button on the page view grid does not have an acces…

…sible name.

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -15,6 +15,7 @@ import {
 	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -66,6 +67,7 @@ function GridItem< Item >( {
 	const { showTitle = true, showMedia = true, showDescription = true } = view;
 	const hasBulkAction = useHasAPossibleBulkAction( actions, item );
 	const id = getItemId( item );
+	const instanceId = useInstanceId( GridItem );
 	const isSelected = selection.includes( id );
 	const renderedMediaField = mediaField?.render ? (
 		<mediaField.render item={ item } />
@@ -89,6 +91,17 @@ function GridItem< Item >( {
 		className: 'dataviews-view-grid__title-field dataviews-title-field',
 	} );
 
+	let mediaA11yProps = {};
+	if ( isItemClickable( item ) && onClickItem ) {
+		mediaA11yProps = renderedTitleField
+			? {
+					'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,
+			  }
+			: {
+					'aria-label': __( 'Navigate to item' ),
+			  };
+	}
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -112,7 +125,9 @@ function GridItem< Item >( {
 			} }
 		>
 			{ showMedia && renderedMediaField && (
-				<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
+				<div { ...clickableMediaItemProps } { ...mediaA11yProps }>
+					{ renderedMediaField }
+				</div>
 			) }
 			{ showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
@@ -128,7 +143,16 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickableTitleItemProps }>{ renderedTitleField }</div>
+				<div
+					{ ...clickableTitleItemProps }
+					{ ...( isItemClickable( item ) && onClickItem
+						? {
+								id: `dataviews-view-grid__title-field-${ instanceId }`,
+						  }
+						: {} ) }
+				>
+					{ renderedTitleField }
+				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
 			<VStack spacing={ 1 }>