Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

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

Browse source
This commit is contained in:
Marco Pedone 2025-08-29 15:03:57 +02:00
parent b3d2d3f4fd
commit f46702275b
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/codiceRicerca.tsx
View file

@ -83,6 +83,7 @@ const AutocompleteSearchBox = ({
"relative flex w-full items-center justify-center rounded-md bg-white", "relative flex w-full items-center justify-center rounded-md bg-white",
containerClassName, containerClassName,
)} )}
id="searchContainer"
> >
<label htmlFor="search" className="sr-only"> <label htmlFor="search" className="sr-only">
Search Box 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", "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, optionBoxClassName,
)} )}
id="searchOptionsBox"
> >
<ul <ul
className={cn( className={cn(

7
apps/infoalloggi/src/pages/index.tsx
View file

@ -62,14 +62,17 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
{testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" /> {testi.index.CTA_Annunci} <Telescope className="ml-2 size-6" />
</Link> </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 <CodiceBox
key={"codiceBox"} key={"codiceBox"}
className="rounded-md placeholder:text-center " className="rounded-md placeholder:text-center "
optionBoxClassName="left-0" optionBoxClassName="left-0"
/> />
<div className="absolute w-full h-full overflow-clip rounded-lg pointer-events-none"> <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> </div>
</div> </div>