From 5106958ac202c955e607dc8224f139b6c496c4a3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 22:31:27 +0000
Subject: [PATCH 1/2] feat: improve accessibility and focus styling for
 ToggleRow component

Added role="switch", aria-checked, aria-label, type="button", and focus-visible styling to the custom toggle button in UserPreferencesModal to enhance screen reader compatibility and keyboard navigation.

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..3f1c5d4a
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-07-12 - Toggle Switch Accessibility
+**Learning:** Custom UI toggle buttons without proper `role` or `aria-checked` attributes leave screen reader users completely unaware of the component's state or purpose. Adding `role="switch"` and standardizing keyboard focus (via `focus-visible`) makes these ubiquitous micro-interactions accessible.
+**Action:** When implementing custom toggle inputs that deviate from standard checkboxes, explicitly define `role="switch"`, bind `aria-checked` to the state boolean, and add `type="button"` to prevent accidental form submission.
diff --git a/src/components/settings/UserPreferencesModal.tsx b/src/components/settings/UserPreferencesModal.tsx
index 15504ff5..69312514 100644
--- a/src/components/settings/UserPreferencesModal.tsx
+++ b/src/components/settings/UserPreferencesModal.tsx
@@ -678,9 +678,13 @@ function ToggleRow({ label, description, checked, onChange, icon: Icon }: Toggle
         </div>
       </div>
       <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
         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]'
         )}
       >

From 6d5bc5394fb9f4c9caafcce9c0a8644f710585c9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sun, 12 Jul 2026 22:37:01 +0000
Subject: [PATCH 2/2] feat: improve accessibility and focus styling for
 ToggleRow component

Added role="switch", aria-checked, aria-label, type="button", and focus-visible styling to the custom toggle button in UserPreferencesModal to enhance screen reader compatibility and keyboard navigation.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 3f1c5d4a..8d73a687 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -1,3 +1,4 @@
 ## 2026-07-12 - Toggle Switch Accessibility
+
 **Learning:** Custom UI toggle buttons without proper `role` or `aria-checked` attributes leave screen reader users completely unaware of the component's state or purpose. Adding `role="switch"` and standardizing keyboard focus (via `focus-visible`) makes these ubiquitous micro-interactions accessible.
 **Action:** When implementing custom toggle inputs that deviate from standard checkboxes, explicitly define `role="switch"`, bind `aria-checked` to the state boolean, and add `type="button"` to prevent accidental form submission.