From 5ee5dcd893aa9aa4e7cda03ddb630e18e30c1e44 Mon Sep 17 00:00:00 2001
From: Evandro Fonseca Junior <asemlk54@gmail.com>
Date: Sat, 10 Oct 2026 04:17:24 -0300
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20nomes=20acess=C3=ADveis=20em=20bus?=
 =?UTF-8?q?ca,=20filtros=20e=20pagina=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- campos de busca (SearchBar e Hero) só tinham placeholder
- botões só com ícone (buscar, voltar, primeira/anterior/próxima/última)
- filtros de Nutri-Score (letras a-e) e chip de alérgenos expõem
  aria-pressed; página atual da paginação usa aria-current
---
 app/components/Pagination.tsx   | 10 ++++++++++
 app/components/SearchBar.tsx    |  3 +++
 app/components/landing/Hero.tsx |  1 +
 app/resultados/page.tsx         |  5 ++++-
 4 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
index ee0b91a..41c910c 100644
--- a/app/components/Pagination.tsx
+++ b/app/components/Pagination.tsx
@@ -126,6 +126,7 @@ export function Pagination({
               size="sm"
               onClick={() => onPageChange(currentPage - 1)}
               disabled={!canGoPrevious}
+              aria-label="Página anterior"
               className="h-9 w-9 p-0 flex-shrink-0"
             >
               <ChevronLeft className="h-4 w-4" />
@@ -141,6 +142,8 @@ export function Pagination({
                     variant={currentPage === page ? "default" : "outline"}
                     size="sm"
                     onClick={() => onPageChange(page as number)}
+                    aria-label={`Página ${page}`}
+                    aria-current={currentPage === page ? "page" : undefined}
                     className="h-9 w-9 p-0"
                   >
                     {page}
@@ -155,6 +158,7 @@ export function Pagination({
               size="sm"
               onClick={() => onPageChange(currentPage + 1)}
               disabled={!canGoNext}
+              aria-label="Próxima página"
               className="h-9 w-9 p-0 flex-shrink-0"
             >
               <ChevronRight className="h-4 w-4" />
@@ -230,6 +234,7 @@ export function Pagination({
                 size="sm"
                 onClick={() => onPageChange(1)}
                 disabled={!canGoPrevious}
+                aria-label="Primeira página"
                 className="h-8 w-8 p-0"
               >
                 <ChevronsLeft className="h-4 w-4" />
@@ -243,6 +248,7 @@ export function Pagination({
                 size="sm"
                 onClick={() => onPageChange(currentPage - 1)}
                 disabled={!canGoPrevious}
+                aria-label="Página anterior"
                 className="h-8 w-8 p-0"
               >
                 <ChevronLeft className="h-4 w-4" />
@@ -259,6 +265,8 @@ export function Pagination({
                     variant={currentPage === page ? "default" : "outline"}
                     size="sm"
                     onClick={() => onPageChange(page as number)}
+                    aria-label={`Página ${page}`}
+                    aria-current={currentPage === page ? "page" : undefined}
                     className="h-8 w-8 p-0"
                   >
                     {page}
@@ -274,6 +282,7 @@ export function Pagination({
                 size="sm"
                 onClick={() => onPageChange(currentPage + 1)}
                 disabled={!canGoNext}
+                aria-label="Próxima página"
                 className="h-8 w-8 p-0"
               >
                 <ChevronRight className="h-4 w-4" />
@@ -287,6 +296,7 @@ export function Pagination({
                 size="sm"
                 onClick={() => onPageChange(totalPages)}
                 disabled={!canGoNext}
+                aria-label="Última página"
                 className="h-8 w-8 p-0"
               >
                 <ChevronsRight className="h-4 w-4" />
diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 810e59b..1ccfd95 100644
--- a/app/components/SearchBar.tsx
+++ b/app/components/SearchBar.tsx
@@ -61,6 +61,7 @@ export function SearchBar({
           <input
             type="text"
             placeholder={placeholder}
+            aria-label="Buscar produto por nome ou código de barras"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKey}
@@ -74,6 +75,7 @@ export function SearchBar({
         <button
           onClick={handleSearch}
           disabled={!query.trim()}
+          aria-label="Buscar"
           className="btn-accent h-9 px-3 py-0 text-xs disabled:opacity-40"
         >
           <Search className="w-3.5 h-3.5" strokeWidth={1.5} />
@@ -95,6 +97,7 @@ export function SearchBar({
         <input
           type="text"
           placeholder={placeholder}
+          aria-label="Buscar produto por nome ou código de barras"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={handleKey}
diff --git a/app/components/landing/Hero.tsx b/app/components/landing/Hero.tsx
index 4eaa270..dd5f2d0 100644
--- a/app/components/landing/Hero.tsx
+++ b/app/components/landing/Hero.tsx
@@ -117,6 +117,7 @@ export function Hero() {
               <input
                 type="text"
                 placeholder={current.placeholder}
+                aria-label="Buscar produto por nome ou código de barras"
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 autoComplete="off"
diff --git a/app/resultados/page.tsx b/app/resultados/page.tsx
index 9bb177b..172f1c9 100644
--- a/app/resultados/page.tsx
+++ b/app/resultados/page.tsx
@@ -346,7 +346,7 @@ function ResultadosContent() {
         }}
       >
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <Link href="/" style={{ display: "flex", padding: 8, color: "var(--fg-secondary)" }}>
+          <Link href="/" aria-label="Voltar ao início" style={{ display: "flex", padding: 8, color: "var(--fg-secondary)" }}>
             <ArrowLeft style={{ width: 18, height: 18 }} strokeWidth={1.75} />
           </Link>
           <div style={{ flex: 1 }}>
@@ -488,6 +488,8 @@ function ResultadosContent() {
                   return (
                     <button
                       key={g}
+                      aria-label={`Nutri-Score ${g.toUpperCase()}`}
+                      aria-pressed={active}
                       onClick={() => {
                         setGradeFilter((prev) => (prev === g ? null : g));
                         setCurrentPage(1);
@@ -516,6 +518,7 @@ function ResultadosContent() {
 
               {/* Allergen-free chip */}
               <button
+                aria-pressed={allergenFree}
                 onClick={() => {
                   setAllergenFree((prev) => !prev);
                   setCurrentPage(1);