Merge fix/adr0008-buscador-un-solo-foco into main
Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 21s
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 6m22s

This commit is contained in:
devops committed 2026-08-28 06:09:08 +00:00
commit 09a8698f7e
1 file changed
+10 -7
@@ -61,18 +61,21 @@ export function PredictiveSearch() {
segundo ring visible al hacer foco. Mas simple y robusto no
heredar clases de foco que hay que pelear despues.
Sin outline-none: globals.css define un outline de
accesibilidad global para foco por teclado
focus-visible:outline-none (no outline-none a secas): globals.css
define un outline de accesibilidad global por teclado
(input:focus-visible, azul de marca) que le gana en
especificidad a la utilidad outline-none de Tailwind -- no
se debe quitar, es intencional. Se le agrega rounded-full
aqui para que ese outline seguido el contorno del pill en
vez de dibujarse como rectangulo recto. */}
especificidad a un outline-none plano. El wrapper de este
componente ya tiene su propio indicador de foco visible
(focus-within:border-ari-marino + ring amarillo, mismo patron
que button.tsx) que cumple el mismo proposito de accesibilidad
sin duplicarlo -- variante focus-visible: en vez de la base
iguala la especificidad de la regla global (mismo truco que ya
usa button.tsx) y evita el doble indicador de foco. */}
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="Busca juguetes, mochilas, personajes…"
className="h-[48px] w-full rounded-full border-0 bg-transparent p-0 text-sm text-slate-950"
className="h-[48px] w-full border-0 bg-transparent p-0 text-sm text-slate-950 focus-visible:outline-none"
/>
{query && <button type="button" aria-label="Limpiar búsqueda" className="mr-1 shrink-0 rounded-full p-1.5 text-slate-400 hover:bg-slate-100" onClick={() => setQuery("")}><X className="size-4" /></button>}
<button type="submit" aria-label="Buscar" className="grid size-10 shrink-0 place-items-center rounded-full bg-ari-marino text-white transition hover:brightness-110">