From 1b5d5562bf9eb867990fbb1dc01e84e2833a3a9b 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.

---
 packages/dataviews/src/dataviews-layouts/grid/index.tsx     | 4 ++++
 .../src/dataviews-layouts/utils/get-clickable-item-props.ts | 6 ++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index 4a016095702026..9ca8e94327d071 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 } />
@@ -80,6 +82,7 @@ function GridItem< Item >( {
 		isItemClickable,
 		onClickItem,
 		className: 'dataviews-view-grid__media',
+		ariaLabelledby: `dataviews-view-grid__title-field-${ instanceId }`,
 	} );
 
 	const clickablePrimaryItemProps = getClickableItemProps( {
@@ -87,6 +90,7 @@ function GridItem< Item >( {
 		isItemClickable,
 		onClickItem,
 		className: 'dataviews-view-grid__primary-field dataviews-title-field',
+		id: `dataviews-view-grid__title-field-${ instanceId }`,
 	} );
 
 	return (
diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
index e03e3a6351ec15..fa07c0ef2354eb 100644
--- a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
+++ b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts
@@ -3,11 +3,15 @@ export default function getClickableItemProps< Item >( {
 	isItemClickable,
 	onClickItem,
 	className,
+	id,
+	ariaLabelledby,
 }: {
 	item: Item;
 	isItemClickable: ( item: Item ) => boolean;
 	onClickItem?: ( item: Item ) => void;
 	className?: string;
+	id?: string;
+	ariaLabelledby?: string;
 } ) {
 	if ( ! isItemClickable( item ) || ! onClickItem ) {
 		return { className };
@@ -31,5 +35,7 @@ export default function getClickableItemProps< Item >( {
 				onClickItem( item );
 			}
 		},
+		...( id ? { id } : {} ),
+		...( ariaLabelledby ? { 'aria-labelledby': ariaLabelledby } : {} ),
 	};
 }