From 3b29077ad21f11ee1c785b48389dd5d0b853e8b7 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Fri, 6 Dec 2024 11:43:51 +0000
Subject: [PATCH] [a11y] Fix: Media button on the page view grid does not have
 an accessible name.

---
 .../src/dataviews-layouts/grid/index.tsx      | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 4e274c5b873fc2..3e1d089892d64f 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/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 }>