🎨 Palette: Add ARIA labels to cart drawer buttons

[fatelessdev]

🎨 Palette: Add ARIA labels to cart drawer buttons

💡 What: Added aria-label attributes to the icon-only "Decrease quantity", "Increase quantity", and "Remove" buttons in the cart drawer. Also fixed a small typo in lib/bargain-discount.ts.
🎯 Why: To ensure screen reader users have proper context when interacting with quantity controls and removing items from their cart.
♿ Accessibility: Improved screen reader support for critical e-commerce interactive elements.

---

PR created automatically by Jules for task 2397339194477021555 started by @f4teless

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
e-commerce	Ready	Preview, Comment	Apr 30, 2026 9:05am

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[fatelessdev]

🤖 AI Code Review

📝 Summary & Verdict

This PR adds ARIA labels to icon-only buttons in the cart drawer for improved screen reader accessibility and fixes a minor typo in a discount formatting function. The changes are straightforward and directly address the stated accessibility goal.

Verdict: ✅ Approve
Estimated review effort: 🎯 1/5 | ⏱️ ~2 minutes

---

📝 Walkthrough

Walkthrough

The PR adds descriptive aria-label attributes to three icon-only buttons in the cart drawer (Decrease quantity, Increase quantity, Remove item) to provide context for screen reader users. It also corrects a typo in the bargain discount label from "upto" to "up to".

Changes

File(s)	Summary
components/features/cart-drawer.tsx	Added aria-label attributes to quantity control and remove buttons
lib/bargain-discount.ts	Fixed typo: "upto" → "up to" in return string

---

📊 Visualization

flowchart TD
    A[Cart Drawer Render] --> B[Render Items Loop]
    B --> C[Render Quantity Controls]
    C --> D[Decrease Button with aria-label]
    C --> E[Increase Button with aria-label]
    B --> F[Remove Button with aria-label]

Loading

---

Actionable comments posted: 0

Tip

No actionable issues found. The code looks good! ✅

---

💡 Suggestions & Improvements

• Performance: No performance concerns with these changes.
• Maintainability: The ARIA labels use template literals with item.name, which is appropriate for dynamic content. Consider if any item names could be excessively long for screen readers.
• Best Practices: The accessibility improvements follow WCAG guidelines for button labeling. The typo fix improves user-facing text quality.

---

🤖 Fix all issues with AI agent

No issues to fix. The PR is ready for merge.

---

Powered by LetsReview