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:
1 parent
3d59903114
commit
5ee5dcd893
4 files changed
+18
-1
No files matched your search
@@ -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" />
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in new issue
Block a user