diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx index 4e274c5b873fc..b1f074c568299 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 ? ( @@ -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 ( ( { } } > { showMedia && renderedMediaField && ( -
{ renderedMediaField }
+
+ { renderedMediaField } +
) } { showMedia && renderedMediaField && ( ( { justify="space-between" className="dataviews-view-grid__title-actions" > -
{ renderedTitleField }
+
+ { renderedTitleField } +