From 601ede46c64ffdd815e9c40e3e262957d9d5e8fb Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 10 Dec 2024 14:56:42 +0000
Subject: [PATCH] [a11y] Fix: Media button on the page view grid does not have
 an accessible name. (#67690)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 .../src/dataviews-layouts/grid/index.tsx      | 27 +++++++++++++++++--
 1 file changed, 25 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..b1f074c5682993 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,23 @@ function GridItem< Item >( {
 		className: 'dataviews-view-grid__title-field dataviews-title-field',
 	} );
 
+	let mediaA11yProps;
+	let titleA11yProps;
+	if ( isItemClickable( item ) && onClickItem ) {
+		if ( renderedTitleField ) {
+			mediaA11yProps = {
+				'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,
+			};
+			titleA11yProps = {
+				id: `dataviews-view-grid__title-field-${ instanceId }`,
+			};
+		} else {
+			mediaA11yProps = {
+				'aria-label': __( 'Navigate to item' ),
+			};
+		}
+	}
+
 	return (
 		<VStack
 			spacing={ 0 }
@@ -112,7 +131,9 @@ function GridItem< Item >( {
 			} }
 		>
 			{ showMedia && renderedMediaField && (
-				<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
+				<div { ...clickableMediaItemProps } { ...mediaA11yProps }>
+					{ renderedMediaField }
+				</div>
 			) }
 			{ showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
@@ -128,7 +149,9 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickableTitleItemProps }>{ renderedTitleField }</div>
+				<div { ...clickableTitleItemProps } { ...titleA11yProps }>
+					{ renderedTitleField }
+				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />
 			</HStack>
 			<VStack spacing={ 1 }>