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

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

Browse source
This commit is contained in:
Marco Pedone 2025-10-20 11:56:54 +02:00
parent af6ba02d67
commit 42249a75e2
4 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,11 +15,13 @@ export const CodiceBox = ({
optionBoxClassName, optionBoxClassName,
optionsClassName, optionsClassName,
containerClassName, containerClassName,
inputId,
}: { }: {
className?: string; className?: string;
optionBoxClassName?: string; optionBoxClassName?: string;
optionsClassName?: string; optionsClassName?: string;
containerClassName?: string; containerClassName?: string;
inputId: string;
}) => { }) => {
const { data: codici, isLoading: loading } = api.annunci.getCodici.useQuery(); const { data: codici, isLoading: loading } = api.annunci.getCodici.useQuery();
const { locale } = useTranslation(); const { locale } = useTranslation();
@ -28,6 +30,7 @@ export const CodiceBox = ({
<AutocompleteSearchBox <AutocompleteSearchBox
className={className} className={className}
containerClassName={containerClassName} containerClassName={containerClassName}
inputId={inputId}
key={locale} key={locale}
loading={loading} loading={loading}
optionBoxClassName={optionBoxClassName} optionBoxClassName={optionBoxClassName}
@ -44,6 +47,7 @@ type SearchBoxProps = {
optionBoxClassName?: string; optionBoxClassName?: string;
optionsClassName?: string; optionsClassName?: string;
containerClassName?: string; containerClassName?: string;
inputId: string;
}; };
const AutocompleteSearchBox = ({ const AutocompleteSearchBox = ({
@ -53,6 +57,7 @@ const AutocompleteSearchBox = ({
optionBoxClassName, optionBoxClassName,
optionsClassName, optionsClassName,
containerClassName, containerClassName,
inputId,
}: SearchBoxProps) => { }: SearchBoxProps) => {
const router = useRouter(); const router = useRouter();
const [open, setOpen] = useState<boolean>(false); const [open, setOpen] = useState<boolean>(false);
@ -85,7 +90,7 @@ const AutocompleteSearchBox = ({
)} )}
id="searchContainer" id="searchContainer"
> >
<label className="sr-only" htmlFor="search"> <label className="sr-only" htmlFor={inputId || "search"}>
Search Box Search Box
</label> </label>
<Input <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", "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, className,
)} )}
id="search" id={inputId || "search"}
onBlur={() => { onBlur={() => {
setIsFocused(false); setIsFocused(false);
}} }}

1
apps/infoalloggi/src/components/navbar/ricerca_command.tsx
View file

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

6
apps/infoalloggi/src/pages/annunci.tsx
View file

@ -250,7 +250,11 @@ const RicercaFilters = () => {
</div> </div>
<div className="flex w-full items-center justify-between gap-2 sm:justify-between"> <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"> <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> </div>
<CTA_TipologiaModal /> <CTA_TipologiaModal />

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

@ -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"> <div className="relative mx-auto flex w-full items-center justify-center gap-2 p-1 [&:has(#searchOptionsBox)]:[&_#animationDiv]:invisible">
<CodiceBox <CodiceBox
className="rounded-md placeholder:text-center" className="rounded-md placeholder:text-center"
inputId="index-search"
key={"codiceBox"} key={"codiceBox"}
optionBoxClassName="left-0" optionBoxClassName="left-0"
/> />