From b8ee53604242840431eba35249be1fe14e8c7460 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 21 Jun 2026 22:53:55 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20accessibili?=
 =?UTF-8?q?ty=20in=20UserPreferencesModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md                                | 3 +++
 src/components/settings/UserPreferencesModal.tsx | 6 +++++-
 2 files changed, 8 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..c03cd3ba
--- /dev/null
+++ b/.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.
diff --git a/src/components/settings/UserPreferencesModal.tsx b/src/components/settings/UserPreferencesModal.tsx
index b19d09cd..415feed3 100644
--- a/src/components/settings/UserPreferencesModal.tsx
+++ b/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(