feat: add IDs to search container and options box for improved accessibility and styling

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(

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>