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

…sible name.
WordPress · Dec 6, 2024 · 1b5d556 · 1b5d556
1 parent 0d7312b
commit 1b5d556
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 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 } />
@@ -80,13 +82,15 @@ function GridItem< Item >( {
 		isItemClickable,
 		onClickItem,
 		className: 'dataviews-view-grid__media',
+		ariaLabelledby: `dataviews-view-grid__title-field-${ instanceId }`,
 	} );
 
 	const clickablePrimaryItemProps = getClickableItemProps( {
 		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
@@ -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 } : {} ),
 	};
 }