fix(a11y): nomes acessíveis em busca, filtros e paginação

- 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
This commit is contained in:
evandro committed 2026-10-10 04:17:24 -03:00
1 parent 3d59903114
commit 5ee5dcd893
4 files changed
+18 -1

No files matched your search

+10
View File
@@ -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" />
+3
View File
@@ -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}
+1
View File
@@ -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"
+4 -1
View File
@@ -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);