From dec911a660b1887a21245ffa3b00fd8474d2efa5 Mon Sep 17 00:00:00 2001
From: Femke Reunes <femke.reunes@studiohyperdrive.be>
Date: Thu, 3 Sep 2026 08:26:48 +0200
Subject: [PATCH] ARC-3876: add aria label to image grid item

---
 .../blocks/BlockImageGrid/BlockImageGrid.tsx  | 53 +++++++++++++------
 .../shared/components/SmartLink/SmartLink.tsx |  6 ++-
 2 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.tsx b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.tsx
index ebf2a9b3e..f4a55aae0 100644
--- a/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.tsx
+++ b/ui/src/react-admin/modules/content-page/components/blocks/BlockImageGrid/BlockImageGrid.tsx
@@ -11,6 +11,8 @@ import { defaultRenderLinkFunction } from '~shared/helpers/routing/link';
 
 import './BlockImageGrid.scss';
 import { CopyrightAttribution } from '~shared/components/CopyrightAttribution';
+import { generateSmartLink } from '~shared/components/SmartLink/SmartLink.tsx';
+import { tText } from '~shared/helpers/translation-functions.ts';
 
 export const BlockImageGrid: FunctionComponent<BlockImageGridProps> = ({
 	elements = [],
@@ -111,22 +113,41 @@ export const BlockImageGrid: FunctionComponent<BlockImageGridProps> = ({
 		<div
 			className={clsx('c-block-grid', `text-align-${textAlign}`, `item-align-${align}`, className)}
 		>
-			{elements.map((element, index) => (
-				<div
-					key={`block-grid-${element?.action?.value || element.title || null}${index}`}
-					className={clsx('c-block-grid__item')}
-					style={{
-						width: itemWidth,
-						margin: `${Math.round(verticalMargin / 2)}px ${Math.round(horizontalMargin / 2)}px`,
-					}}
-				>
-					{renderLink(
-						element.action,
-						renderGridImage(element),
-						element.title || element.buttonTitle || element.titleAbove
-					)}
-				</div>
-			))}
+			{elements.map((element, index) => {
+				const title = element.title || element.buttonTitle || element.titleAbove || '';
+				let elementAriaLabel: string;
+
+				if (element.imageLabel?.text) {
+					elementAriaLabel = tText('aria-label block image grid item met label', {
+						label: element.imageLabel.text,
+						title,
+					});
+				} else {
+					elementAriaLabel = tText('aria-label block image grid item', {
+						title,
+					});
+				}
+
+				return (
+					<div
+						key={`block-grid-${element?.action?.value || element.title || null}${index}`}
+						className={clsx('c-block-grid__item')}
+						style={{
+							width: itemWidth,
+							margin: `${Math.round(verticalMargin / 2)}px ${Math.round(horizontalMargin / 2)}px`,
+						}}
+					>
+						{generateSmartLink(
+							element.action,
+							renderGridImage(element),
+							title,
+							undefined,
+							undefined,
+							elementAriaLabel
+						)}
+					</div>
+				);
+			})}
 		</div>
 	);
 };
diff --git a/ui/src/react-admin/modules/shared/components/SmartLink/SmartLink.tsx b/ui/src/react-admin/modules/shared/components/SmartLink/SmartLink.tsx
index 5b5fda598..e751ba9c7 100644
--- a/ui/src/react-admin/modules/shared/components/SmartLink/SmartLink.tsx
+++ b/ui/src/react-admin/modules/shared/components/SmartLink/SmartLink.tsx
@@ -134,6 +134,7 @@ export const SmartLink: FunctionComponent<SmartLinkProps> = ({
 							target={LinkTarget.Blank}
 							rel="noopener noreferrer"
 							title={title}
+							aria-label={ariaLabel}
 							className={clsx(className, { 'a-link__no-styles': removeStyles })}
 							onClick={() => AdminConfigManager.getConfig().handlers.onExternalLink(fullUrl)}
 							onKeyUp={onKeyUpHandler}
@@ -150,6 +151,7 @@ export const SmartLink: FunctionComponent<SmartLinkProps> = ({
 						target={LinkTarget.Blank}
 						rel="noopener noreferrer"
 						title={title}
+						aria-label={ariaLabel}
 						className={clsx(className, { 'a-link__no-styles': removeStyles })}
 						onClick={() => AdminConfigManager.getConfig().handlers.onExternalLink(fullUrl)}
 						onKeyUp={onKeyUpHandler}
@@ -284,7 +286,8 @@ export const generateSmartLink = (
 	children: ReactNode,
 	title?: string,
 	className?: string,
-	tabIndex?: number
+	tabIndex?: number,
+	ariaLabel?: string
 	// biome-ignore lint/suspicious/noExplicitAny: todo
 ): ReactElement<any, any> | null => {
 	return (
@@ -294,6 +297,7 @@ export const generateSmartLink = (
 			className={className}
 			key={`smart-link-${action?.value}-${title}-${className}`}
 			tabIndex={tabIndex}
+			ariaLabel={ariaLabel}
 		>
 			{children}
 		</SmartLink>