🎨 Palette: Add accessibility attributes to button loading state

.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.

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}
       >