From 6a9e33f0ed04d68d0fe5dadfb3b2119874c4e426 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 5 Jul 2026 22:53:39 +0000
Subject: [PATCH] feat: add accessible loading states to UI button

- Adds `aria-busy` to communicate loading state to screen readers.
- Hides decorative `Loader2` spinner from screen readers using `aria-hidden="true"`.

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

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..2bc916a4
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-18 - Adding accessibility to Button loading states
+**Learning:** Loading states inside accessible interactive elements (like custom buttons) should communicate properly using `aria-busy` and hiding decorative loading spin icons via `aria-hidden` to avoid repetitive screen reader announcements.
+**Action:** When adding accessible loading states to buttons, always apply `aria-busy={true}` to the button element and `aria-hidden="true"` to any decorative icon rendering the loading animation.
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0757f7f5..8f8caab5 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -10,8 +10,7 @@ import { useHaptic } from '@/hooks/use-haptic'
 import { buttonVariants } from './button-variants'
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
   isLoading?: boolean
 }
@@ -33,7 +32,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const content = showLoader ? (
       <>
-        <Loader2 className="animate-spin" />
+        <Loader2 className="animate-spin" aria-hidden="true" />
         {children}
       </>
     ) : (
@@ -46,6 +45,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={isLoading || props.disabled}
         onClick={handleClick}
+        aria-busy={isLoading ? 'true' : undefined}
         {...props}
       >
         {content}