From f46702275b1f7bcafd18f78551470027320abb5d Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Fri, 29 Aug 2025 15:03:57 +0200
Subject: [PATCH] feat: add IDs to search container and options box for
 improved accessibility and styling

---
 apps/infoalloggi/src/components/codiceRicerca.tsx | 2 ++
 apps/infoalloggi/src/pages/index.tsx              | 7 +++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/infoalloggi/src/components/codiceRicerca.tsx b/apps/infoalloggi/src/components/codiceRicerca.tsx
index ff36219..13171b3 100644
--- a/apps/infoalloggi/src/components/codiceRicerca.tsx
+++ b/apps/infoalloggi/src/components/codiceRicerca.tsx
@@ -83,6 +83,7 @@ const AutocompleteSearchBox = ({
 					"relative flex w-full items-center justify-center rounded-md bg-white",
 					containerClassName,
 				)}
+				id="searchContainer"
 			>
 				<label htmlFor="search" className="sr-only">
 					Search Box
@@ -119,6 +120,7 @@ const AutocompleteSearchBox = ({
 						"border-foreground ring-foreground absolute z-50 mt-1 max-h-64 w-full overflow-hidden rounded-md border bg-white shadow-xs ring-1",
 						optionBoxClassName,
 					)}
+					id="searchOptionsBox"
 				>
 					<ul
 						className={cn(
diff --git a/apps/infoalloggi/src/pages/index.tsx b/apps/infoalloggi/src/pages/index.tsx
index 8b7f691..ae0d7e4 100644
--- a/apps/infoalloggi/src/pages/index.tsx
+++ b/apps/infoalloggi/src/pages/index.tsx
@@ -62,14 +62,17 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
 					{testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />
 				</Link>
 
-				<div className="relative mx-auto flex w-full gap-2 p-1 items-center justify-center">
+				<div className="relative mx-auto flex w-full gap-2 p-1 items-center justify-center [&:has(#searchOptionsBox)]:[&_#animationDiv]:invisible">
 					<CodiceBox
 						key={"codiceBox"}
 						className="rounded-md placeholder:text-center "
 						optionBoxClassName="left-0"
 					/>
 					<div className="absolute w-full h-full  overflow-clip rounded-lg pointer-events-none">
-						<div className="animate-ping  w-full h-full bg-green-400 pointer-events-none" />
+						<div
+							className="animate-[ping_1.5s_cubic-bezier(0,0,.2,1)_infinite] w-full h-full bg-yellow-500 pointer-events-none"
+							id="animationDiv"
+						/>
 					</div>
 				</div>
 			</div>