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

…sible name.
WordPress · Dec 6, 2024 · f5b2ddd · f5b2ddd
1 parent 2331573
commit f5b2ddd
Showing 1 changed file with 12 additions and 2 deletions.
diff --git 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 } />
@@ -112,7 +114,12 @@ function GridItem< Item >( {
 			} }
 		>
 			{ showMedia && renderedMediaField && (
-				<div { ...clickableMediaItemProps }>{ renderedMediaField }</div>
+				<div
+					{ ...clickableMediaItemProps }
+					aria-labelledby={ `dataviews-view-grid__title-field-${ instanceId }` }
+				>
+					{ renderedMediaField }
+				</div>
 			) }
 			{ showMedia && renderedMediaField && (
 				<DataViewsSelectionCheckbox
@@ -128,7 +135,10 @@ function GridItem< Item >( {
 				justify="space-between"
 				className="dataviews-view-grid__title-actions"
 			>
-				<div { ...clickablePrimaryItemProps }>
+				<div
+					{ ...clickablePrimaryItemProps }
+					id={ `dataviews-view-grid__title-field-${ instanceId }` }
+				>
 					{ renderedTitleField }
 				</div>
 				<ItemActions item={ item } actions={ actions } isCompact />