🎨 Palette: Add accessibility attributes to Button loading state

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2024-05-18 - Screen Reader Compatibility for Loading Spinners
+**Learning:** When displaying a loading spinner (like `Loader2` from `lucide-react`) inside a button, screen readers may redundantly or confusingly read out the decorative SVG element if not properly hidden. Additionally, the button itself needs to explicitly declare its busy state.
+**Action:** Always add `aria-hidden="true"` to purely decorative loading icons and apply `aria-busy={isLoading}` to the parent `<button>` or interactive element to ensure assistive technologies correctly interpret the state without spamming the user.

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}
       </>
     ) : (
@@ -46,6 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={isLoading || props.disabled}
         onClick={handleClick}
+        aria-busy={isLoading}
         {...props}
       >
         {content}