From f9c75ad611c71d2118f7a10f0e441fa39c10433d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 1 May 2026 08:49:13 +0000
Subject: [PATCH] Added missing `aria-label`s to multiple `<Button
 size="icon">` components across the codebase.

This improves accessibility for screen reader users by providing descriptive labels for buttons that otherwise only contained icons.
Changes were made in:
- `components/ui/theme-toggle-button.tsx` (Toggle theme)
- `app/navbar.tsx` (Orders, Account, Wishlist, Cart)
- `components/layout/navbar.tsx` (Search submit/close, Wishlist, Account, Cart)

Co-authored-by: f4teless <60130665+f4teless@users.noreply.github.com>
---
 app/navbar.tsx                        |  7 ++++---
 components/layout/navbar.tsx          | 10 +++++-----
 components/ui/theme-toggle-button.tsx |  1 +
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/navbar.tsx b/app/navbar.tsx
index ebfe5e8..ed65342 100644
--- a/app/navbar.tsx
+++ b/app/navbar.tsx
@@ -124,21 +124,21 @@ export function Navbar() {
             />
 
             <Link href="/orders">
-              <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300">
+              <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300" aria-label="Orders">
                 <Package className="h-4 w-4" />
                 <span className="sr-only">Orders</span>
               </Button>
             </Link>
 
             <Link href="/account" className="hidden sm:block">
-              <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300">
+              <Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground hover:text-foreground transition-colors duration-300" aria-label="Account">
                 <User className="h-4 w-4" />
                 <span className="sr-only">Account</span>
               </Button>
             </Link>
 
             <Link href="/wishlist">
-              <Button variant="ghost" size="icon" className="h-9 w-9 relative text-muted-foreground hover:text-foreground transition-colors duration-300">
+              <Button variant="ghost" size="icon" className="h-9 w-9 relative text-muted-foreground hover:text-foreground transition-colors duration-300" aria-label="Wishlist">
                 <Heart className="h-4 w-4" />
                 {wishlistItems.length > 0 && (
                   <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-accent text-white text-[10px] flex items-center justify-center font-semibold">
@@ -154,6 +154,7 @@ export function Navbar() {
               size="icon"
               className="h-9 w-9 relative text-muted-foreground hover:text-foreground transition-colors duration-300"
               onClick={() => setIsOpen(true)}
+              aria-label="Cart"
             >
               <ShoppingBag className="h-4 w-4" />
               {totalItems > 0 && (
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 22394bd..bd553e9 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -71,10 +71,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>
@@ -87,7 +87,7 @@ export function Navbar() {
 
                     {/* Wishlist */}
                     <Link href="/wishlist">
-                        <Button variant="ghost" size="icon" className="h-9 w-9 relative">
+                        <Button variant="ghost" size="icon" className="h-9 w-9 relative" aria-label="Wishlist">
                             <Heart className="h-4 w-4" />
                             {wishlistItems.length > 0 && (
                                 <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-foreground text-background text-xs flex items-center justify-center">
@@ -100,14 +100,14 @@ export function Navbar() {
 
                     {/* Account */}
                     <Link href="/account">
-                        <Button variant="ghost" size="icon" className="h-9 w-9">
+                        <Button variant="ghost" size="icon" className="h-9 w-9" aria-label="Account">
                             <User className="h-4 w-4" />
                             <span className="sr-only">Account</span>
                         </Button>
                     </Link>
 
                     {/* Cart */}
-                    <Button variant="ghost" size="icon" className="h-9 w-9 relative" onClick={() => setIsOpen(true)}>
+                    <Button variant="ghost" size="icon" className="h-9 w-9 relative" onClick={() => setIsOpen(true)} aria-label="Cart">
                         <ShoppingBag className="h-4 w-4" />
                         {totalItems > 0 && (
                             <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-foreground text-background text-xs flex items-center justify-center">
diff --git a/components/ui/theme-toggle-button.tsx b/components/ui/theme-toggle-button.tsx
index a1c6cbb..4380d86 100644
--- a/components/ui/theme-toggle-button.tsx
+++ b/components/ui/theme-toggle-button.tsx
@@ -69,6 +69,7 @@ export default function ThemeToggleButton({
       size="icon"
       className="w-9 p-0 h-9 relative group"
       name="Theme Toggle Button"
+      aria-label="Toggle theme"
     >
       <SunIcon className="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <MoonIcon className="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />