JulesClient/patch.diff at main · TheRealAshik/JulesClient · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
--- web/components/ProactiveSection.tsx
+++ web/components/ProactiveSection.tsx
@@ -37,10 +37,10 @@
                     <div className="flex flex-col">
-                        <div className="text-[15px] font-medium text-zinc-100 leading-snug">
+                        <div id="auto-find-issues-label" className="text-[15px] font-medium text-zinc-100 leading-snug">
                             Automatically find issues
                         </div>
-                        <div className="text-xs text-zinc-500">
+                        <div id="auto-find-issues-desc" className="text-xs text-zinc-500">
                             Scan codebase for bugs & improvements
                         </div>
                     </div>
                 </div>

                 <div className="flex items-center gap-3">
                     <span className="text-xs font-mono text-zinc-600 hidden sm:block">0/5</span>
                     <div
                         onClick={() => setIsEnabled(!isEnabled)}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setIsEnabled(!isEnabled);
+                            }
+                        }}
                         className={`
-                            w-[44px] h-[24px] rounded-full relative transition-colors duration-300 ease-in-out cursor-pointer flex-shrink-0
+                            w-[44px] h-[24px] rounded-full relative transition-colors duration-300 ease-in-out cursor-pointer flex-shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-surface
                             ${isEnabled ? 'bg-indigo-600' : 'bg-zinc-700'}
                         `}
                         role="switch"
                         aria-checked={isEnabled}
+                        aria-labelledby="auto-find-issues-label"
+                        aria-describedby="auto-find-issues-desc"
+                        tabIndex={0}
                     >
                         <span
                             className={`