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