From db5efc655e4d097ae68ec78316d6058a6701f1f0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 6 May 2026 10:16:44 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20missing=20ARIA?=
 =?UTF-8?q?=20labels=20to=20icon-only=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added missing `aria-label` attributes to various icon-only `<Button>` components in `components/layout/navbar.tsx` and `components/features/cart-drawer.tsx` to improve screen reader accessibility. This includes navigation buttons (menu toggle, search submit/close) and cart controls (increase, decrease, remove item).

Co-authored-by: f4teless <60130665+f4teless@users.noreply.github.com>
---
 components/features/cart-drawer.tsx | 3 +++
 components/layout/navbar.tsx        | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/features/cart-drawer.tsx b/components/features/cart-drawer.tsx
index 475a691..47da108 100644
--- a/components/features/cart-drawer.tsx
+++ b/components/features/cart-drawer.tsx
@@ -117,6 +117,7 @@ export function CartDrawer() {
                                                     size="icon"
                                                     className="h-7 w-7 rounded-none"
                                                     onClick={() => updateQuantity(item.id, item.size, item.quantity - 1, item.color, item.comboGroupId)}
+                                                    aria-label="Decrease quantity"
                                                 >
                                                     <Minus className="h-3 w-3" />
                                                 </Button>
@@ -126,6 +127,7 @@ export function CartDrawer() {
                                                     size="icon"
                                                     className="h-7 w-7 rounded-none"
                                                     onClick={() => updateQuantity(item.id, item.size, item.quantity + 1, item.color, item.comboGroupId)}
+                                                    aria-label="Increase quantity"
                                                 >
                                                     <Plus className="h-3 w-3" />
                                                 </Button>
@@ -136,6 +138,7 @@ export function CartDrawer() {
                                             size="icon"
                                             className="h-7 w-7 self-start text-muted-foreground hover:text-foreground"
                                             onClick={() => removeItem(item.id, item.size, item.color, item.comboGroupId)}
+                                            aria-label="Remove item"
                                         >
                                             <X className="h-3.5 w-3.5" />
                                         </Button>
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 22394bd..c151b09 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -35,6 +35,7 @@ export function Navbar() {
                     size="icon"
                     className="md:hidden mr-2"
                     onClick={() => setShowMobileMenu(!showMobileMenu)}
+                    aria-label="Toggle mobile menu"
                 >
                     {showMobileMenu ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                 </Button>
@@ -71,10 +72,10 @@ export function Navbar() {
                                 autoFocus
                                 className="h-9 w-32 md:w-48 px-3 bg-secondary/50 border border-input rounded-none text-sm focus:outline-none focus:ring-1 focus:ring-ring"
                             />
-                            <Button type="submit" variant="ghost" size="icon" className="h-9 w-9">
+                            <Button type="submit" variant="ghost" size="icon" className="h-9 w-9" aria-label="Submit search">
                                 <Search className="h-4 w-4" />
                             </Button>
-                            <Button type="button" variant="ghost" size="icon" className="h-9 w-9" onClick={() => setShowSearch(false)}>
+                            <Button type="button" variant="ghost" size="icon" className="h-9 w-9" onClick={() => setShowSearch(false)} aria-label="Close search">
                                 <X className="h-4 w-4" />
                             </Button>
                         </form>