From 497319c5e704917e4accadcce49a01111db8f025 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 22:35:31 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibili?=
 =?UTF-8?q?ty=20attributes=20to=20button=20loading=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added `aria-hidden="true"` to the `Loader2` icon and `aria-busy={isLoading}` to the root button element in `src/components/ui/button.tsx`.
🎯 Why: Prevents screen readers from announcing the decorative spinner icon and correctly communicates the button's loading state to assistive technologies.
♿ Accessibility: Improves experience for screen reader users by reducing noise and providing accurate state information.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md            | 3 +++
 src/components/ui/button.tsx | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..7d0a508c
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-03-02 - [Button Loading State Accessibility]
+**Learning:** Loading states on reusable buttons (like `src/components/ui/button.tsx`) can be noisy for screen readers if the spinning icon isn't hidden.
+**Action:** Always add `aria-hidden="true"` to decorative loader icons (like `Loader2`) and `aria-busy={isLoading}` to the parent `<button>` to correctly communicate the loading state to screen readers without announcing the icon itself.
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0757f7f5..2ce834cf 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -33,7 +33,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const content = showLoader ? (
       <>
-        <Loader2 className="animate-spin" />
+        <Loader2 className="animate-spin" aria-hidden="true" />
         {children}
       </>
     ) : (
@@ -45,6 +45,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         disabled={isLoading || props.disabled}
+        aria-busy={isLoading}
         onClick={handleClick}
         {...props}
       >

From 5e3ca30eeacf3cb8741d7443468b8f60d5f5df39 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 14 Jun 2026 22:37:24 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20accessibili?=
 =?UTF-8?q?ty=20attributes=20to=20button=20loading=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Added `aria-hidden="true"` to the `Loader2` icon and `aria-busy={isLoading}` to the root button element in `src/components/ui/button.tsx`.
🎯 Why: Prevents screen readers from announcing the decorative spinner icon and correctly communicates the button's loading state to assistive technologies.
♿ Accessibility: Improves experience for screen reader users by reducing noise and providing accurate state information.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>