feat: enhance LazyCardAnnuncio interaction; prevent default click behavior and stop propagation for better accessibility
This commit is contained in:
parent
f2c7bcce4e
commit
306be40555
1 changed files with 12 additions and 10 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue