feat: enhance LazyCardAnnuncio interaction; prevent default click behavior and stop propagation for better accessibility

This commit is contained in:
Marco Pedone 2025-11-13 15:39:44 +01:00
parent f2c7bcce4e
commit 306be40555

View file

@ -70,7 +70,17 @@ export const LazyCardAnnuncio = (props: CardAnnuncioProps) => {
}, [intersection]); }, [intersection]);
return ( 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 />} {shouldRender ? <CardAnnuncio {...props} /> : <SkeletonCardAnnuncio />}
</div> </div>
); );
@ -155,7 +165,7 @@ export const CardAnnuncio = ({
> >
<div <div
className={cn( className={cn(
"absolute inset-0 z-20 size-full rounded-md", "pointer-events-none absolute inset-0 z-20 size-full rounded-md",
homepage && homepage &&
(isAvailableNow (isAvailableNow
? "border-[.35rem] border-green-500" ? "border-[.35rem] border-green-500"
@ -259,18 +269,10 @@ export const CardAnnuncio = ({
<CarouselPrevious <CarouselPrevious
className="left-2 cursor-pointer" className="left-2 cursor-pointer"
disabled={!images || images.length === 1} disabled={!images || images.length === 1}
onClick={(e) => {
e.preventDefault();
e.stopPropagation(); // Add this to the buttons too
}}
/> />
<CarouselNext <CarouselNext
className="right-2 cursor-pointer" className="right-2 cursor-pointer"
disabled={!images || images.length === 1} disabled={!images || images.length === 1}
onClick={(e) => {
e.preventDefault();
e.stopPropagation(); // Add this to the buttons too
}}
/> />
</div> </div>
</Carousel> </Carousel>