From 5d75bfa7e25b6447652b2e69afb5507c5790c6c8 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 2 May 2026 08:27:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20of=20cart=20drawer=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added `aria-label` attributes to the icon-only buttons (decrease quantity, increase quantity, remove item) in the Cart Drawer component.
🎯 Why: Screen readers cannot interpret the purpose of a button containing only an icon without an `aria-label` or visually hidden text, making the cart unusable for some users.
♿ Accessibility: Improved screen reader navigation and clarity for the checkout flow.

Co-authored-by: f4teless <60130665+f4teless@users.noreply.github.com>
---
 .jules/palette.md                   | 1 +
 components/features/cart-drawer.tsx | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..f36d77e
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1 @@
+## 2026-05-02 - Missing aria-labels on icon-only buttons\n**Learning:** In Next.js applications using shadcn/ui `<Button size="icon">`, accessibility is often overlooked. Screen readers cannot interpret the purpose of a button containing only an icon unless an `aria-label` or visually hidden text (`sr-only`) is provided. This is a common pattern across many files in this codebase.\n**Action:** Add descriptive `aria-label` attributes to all icon-only buttons to ensure they are accessible to users relying on assistive technologies.
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>