🎨 Palette: Improve accessibility in UserPreferencesModal

.Jules/palette.md

@@ -0,0 +1,3 @@
+## 2025-02-23 - Custom Toggle Buttons
+**Learning:** Custom UI controls like custom toggle buttons constructed from generic `<button>` elements often lack native semantics. Without `role="switch"` and `aria-checked`, screen readers will just announce them as generic buttons, making their state unclear. Furthermore, if they rely on custom styling, native focus outlines are often removed or masked, leaving keyboard users lost.
+**Action:** Always add `role="switch"` and `aria-checked={boolean}` to custom toggle buttons. Additionally, implement explicit focus indicators using `focus-visible` Tailwind utilities (e.g., `focus-visible:ring-2 focus-visible:ring-[#6C63FF] focus-visible:ring-offset-2`) to guarantee keyboard navigation accessibility.

src/components/settings/UserPreferencesModal.tsx

@@ -202,6 +202,7 @@ export default function UserPreferencesModal({
                 <button
                   onClick={onClose}
                   className="rounded-lg p-2 text-[#9CA3AF] hover:bg-[#F3F4F6] hover:text-[#111827] transition-colors"
+                  aria-label="Close preferences"
                 >
                   <X className="size-5" />
                 </button>
@@ -697,9 +698,12 @@ function ToggleRow({ label, description, checked, onChange, icon: Icon }: Toggle
       <button
         onClick={() => onChange(!checked)}
         className={cn(
-          'relative h-6 w-11 rounded-full transition-colors',
+          'relative h-6 w-11 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6C63FF] focus-visible:ring-offset-2',
           checked ? 'bg-[#6C63FF]' : 'bg-[#D1D5DB]'
         )}
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
       >
         <span
           className={cn(