From 306be4055540eaf73fdd43b6a4a24d6f1825335e Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Thu, 13 Nov 2025 15:39:44 +0100
Subject: [PATCH] feat: enhance LazyCardAnnuncio interaction; prevent default
 click behavior and stop propagation for better accessibility

---
 .../src/components/annuncio_card.tsx          | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/infoalloggi/src/components/annuncio_card.tsx b/apps/infoalloggi/src/components/annuncio_card.tsx
index a9a2966..694b78d 100644
--- a/apps/infoalloggi/src/components/annuncio_card.tsx
+++ b/apps/infoalloggi/src/components/annuncio_card.tsx
@@ -70,7 +70,17 @@ export const LazyCardAnnuncio = (props: CardAnnuncioProps) => {
 	}, [intersection]);
 
 	return (
-		<div className="min-h-[31.1rem]" ref={intersectionRef}>
+		<div
+			className="min-h-[31.1rem]"
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+			onKeyDown={(e) => e.stopPropagation()}
+			ref={intersectionRef}
+			role="button"
+			tabIndex={0}
+		>
 			{shouldRender ? <CardAnnuncio {...props} /> : <SkeletonCardAnnuncio />}
 		</div>
 	);
@@ -155,7 +165,7 @@ export const CardAnnuncio = ({
 				>
 					<div
 						className={cn(
-							"absolute inset-0 z-20 size-full rounded-md",
+							"pointer-events-none absolute inset-0 z-20 size-full rounded-md",
 							homepage &&
 								(isAvailableNow
 									? "border-[.35rem] border-green-500"
@@ -259,18 +269,10 @@ export const CardAnnuncio = ({
 								<CarouselPrevious
 									className="left-2 cursor-pointer"
 									disabled={!images || images.length === 1}
-									onClick={(e) => {
-										e.preventDefault();
-										e.stopPropagation(); // Add this to the buttons too
-									}}
 								/>
 								<CarouselNext
 									className="right-2 cursor-pointer"
 									disabled={!images || images.length === 1}
-									onClick={(e) => {
-										e.preventDefault();
-										e.stopPropagation(); // Add this to the buttons too
-									}}
 								/>
 							</div>
 						</Carousel>