From a40f36190582459f7593997e6d501ab2117a50a6 Mon Sep 17 00:00:00 2001
From: Hardik Bhalekar <hardik.bhalekar10@gmail.com>
Date: Sun, 21 Jun 2026 01:24:19 +0530
Subject: [PATCH] fix(accessibility): add high-contrast focus ring visible
 focus-visible:ring-purple-500 to custom select components

---
 app/customize/components/ThemeSelector.tsx     | 2 +-
 components/dashboard/CIAnalytics/CIFilters.tsx | 4 ++--
 components/dashboard/InactiveRepoReminder.tsx  | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/customize/components/ThemeSelector.tsx b/app/customize/components/ThemeSelector.tsx
index 425a4c031..02eefb9ff 100644
--- a/app/customize/components/ThemeSelector.tsx
+++ b/app/customize/components/ThemeSelector.tsx
@@ -25,7 +25,7 @@ function StyledSelect({
       aria-label={ariaLabel}
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-black dark:text-white outline-none focus:border-emerald-500/50 transition-colors appearance-none cursor-pointer [color-scheme:light] dark:[color-scheme:dark] [&>option]:bg-white [&>option]:text-black dark:[&>option]:bg-[#0a0a0a] dark:[&>option]:text-white"
+      className="w-full bg-gray-100/80 backdrop-blur-md border border-black/10 dark:bg-white/[0.03] dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-black dark:text-white outline-none focus:border-emerald-500/50 focus-visible:ring-2 focus-visible:ring-purple-500 transition-colors appearance-none cursor-pointer [color-scheme:light] dark:[color-scheme:dark] [&>option]:bg-white [&>option]:text-black dark:[&>option]:bg-[#0a0a0a] dark:[&>option]:text-white"
     >
       {children}
     </select>
diff --git a/components/dashboard/CIAnalytics/CIFilters.tsx b/components/dashboard/CIAnalytics/CIFilters.tsx
index 6e1c1701c..c716c01da 100644
--- a/components/dashboard/CIAnalytics/CIFilters.tsx
+++ b/components/dashboard/CIAnalytics/CIFilters.tsx
@@ -97,7 +97,7 @@ export default function CIFilters({
         <select
           value={filters.timeRange}
           onChange={(e) => update('timeRange', e.target.value)}
-          className="px-3 py-2 text-sm bg-white dark:bg-zinc-800/50 border border-black/10 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30 transition-all"
+          className="px-3 py-2 text-sm bg-white dark:bg-zinc-800/50 border border-black/10 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 transition-all"
         >
           {TIME_RANGES.map((t) => (
             <option key={t.value} value={t.value}>
@@ -109,7 +109,7 @@ export default function CIFilters({
         <select
           value={filters.status}
           onChange={(e) => update('status', e.target.value)}
-          className="px-3 py-2 text-sm bg-white dark:bg-zinc-800/50 border border-black/10 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500/30 transition-all"
+          className="px-3 py-2 text-sm bg-white dark:bg-zinc-800/50 border border-black/10 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 transition-all"
         >
           <option value="">All Statuses</option>
           <option value="success">Success</option>
diff --git a/components/dashboard/InactiveRepoReminder.tsx b/components/dashboard/InactiveRepoReminder.tsx
index 0da1efaaf..1e8336a45 100644
--- a/components/dashboard/InactiveRepoReminder.tsx
+++ b/components/dashboard/InactiveRepoReminder.tsx
@@ -69,7 +69,7 @@ export default function InactiveRepoReminder({ repos }: InactiveRepoReminderProp
             <select
               value={filter}
               onChange={(e) => setFilter(Number(e.target.value) as InactivityFilter)}
-              className="text-xs font-semibold px-2.5 py-1.5 rounded-lg border border-gray-200 dark:border-neutral-700 bg-gray-50 hover:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 text-gray-600 dark:text-zinc-400 transition-colors outline-none cursor-pointer"
+              className="text-xs font-semibold px-2.5 py-1.5 rounded-lg border border-gray-200 dark:border-neutral-700 bg-gray-50 hover:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 text-gray-600 dark:text-zinc-400 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-purple-500 cursor-pointer"
               aria-label="Inactivity filter"
             >
               {FILTER_OPTIONS.map((opt) => (