fix: add inputId prop to CodiceBox in multiple components for improved accessibility

apps/infoalloggi/src/components/codiceRicerca.tsx

@@ -15,11 +15,13 @@ export const CodiceBox = ({
 	optionBoxClassName,
 	optionsClassName,
 	containerClassName,
+	inputId,
 }: {
 	className?: string;
 	optionBoxClassName?: string;
 	optionsClassName?: string;
 	containerClassName?: string;
+	inputId: string;
 }) => {
 	const { data: codici, isLoading: loading } = api.annunci.getCodici.useQuery();
 	const { locale } = useTranslation();
@@ -28,6 +30,7 @@ export const CodiceBox = ({
 		<AutocompleteSearchBox
 			className={className}
 			containerClassName={containerClassName}
+			inputId={inputId}
 			key={locale}
 			loading={loading}
 			optionBoxClassName={optionBoxClassName}
@@ -44,6 +47,7 @@ type SearchBoxProps = {
 	optionBoxClassName?: string;
 	optionsClassName?: string;
 	containerClassName?: string;
+	inputId: string;
 };
 
 const AutocompleteSearchBox = ({
@@ -53,6 +57,7 @@ const AutocompleteSearchBox = ({
 	optionBoxClassName,
 	optionsClassName,
 	containerClassName,
+	inputId,
 }: SearchBoxProps) => {
 	const router = useRouter();
 	const [open, setOpen] = useState<boolean>(false);
@@ -85,7 +90,7 @@ const AutocompleteSearchBox = ({
 				)}
 				id="searchContainer"
 			>
-				<label className="sr-only" htmlFor="search">
+				<label className="sr-only" htmlFor={inputId || "search"}>
 					Search Box
 				</label>
 				<Input
@@ -93,7 +98,7 @@ const AutocompleteSearchBox = ({
 						"z-10 cursor-pointer search-cancel:cursor-pointer rounded-md bg-transparent text-xl search-cancel:brightness-75 search-cancel:grayscale placeholder:font-bold placeholder:text-primary",
 						className,
 					)}
-					id="search"
+					id={inputId || "search"}
 					onBlur={() => {
 						setIsFocused(false);
 					}}

apps/infoalloggi/src/components/navbar/ricerca_command.tsx

@@ -38,6 +38,7 @@ export function RicercaCommand() {
 					<div className="relative mx-auto flex w-full gap-2">
 						<CodiceBox
 							className="rounded-none rounded-t-md outline outline-foreground placeholder:text-center focus:border-none focus:outline-hidden focus:ring-foreground"
+							inputId="command-search"
 							key={"codiceBox"}
 							optionBoxClassName="rounded-none rounded-b-md mt-0 border-b-0 border-x-0"
 						/>

apps/infoalloggi/src/pages/annunci.tsx

@@ -250,7 +250,11 @@ const RicercaFilters = () => {
 				</div>
 				<div className="flex w-full items-center justify-between gap-2 sm:justify-between">
 					<div className="relative z-35 flex w-full gap-1 sm:w-auto">
-						<CodiceBox className="h-10 w-full" optionBoxClassName="top-11 " />
+						<CodiceBox
+							className="h-10 w-full"
+							inputId="annunci-search"
+							optionBoxClassName="top-11 "
+						/>
 					</div>
 
 					<CTA_TipologiaModal />

apps/infoalloggi/src/pages/index.tsx

@@ -88,6 +88,7 @@ const TrovaCasaCTA = (props: { testi: LangDict }) => {
 				<div className="relative mx-auto flex w-full items-center justify-center gap-2 p-1 [&:has(#searchOptionsBox)]:[&_#animationDiv]:invisible">
 					<CodiceBox
 						className="rounded-md placeholder:text-center"
+						inputId="index-search"
 						key={"codiceBox"}
 						optionBoxClassName="left-0"
 					/>