feat(accessibility): add consistent focus indicators for UI elements (#141)

Implements task UI-3.

Adds a consistent, high-visibility 3px focus ring to all interactive elements, including buttons, links, inputs, and accordions.

- Uses the modern `:focus-visible` pseudo-class to apply focus styles only for keyboard navigation, avoiding outlines on mouse clicks.
- Replaces hardcoded colors with Gradio theme variables (e.g., `var(--primary-200)`) to ensure the feature is compatible with theming and dark mode.
- Cleans up a redundant, pre-existing focus style for text inputs that used hardcoded colors.

This change significantly improves keyboard navigation and overall accessibility of the application.

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>

Author: google-labs-jules[bot]

src/ui/theme.py

@@ -43,6 +43,36 @@
     margin: 0 auto !important;
 }
 
+/* --- Accessibility: Focus Indicators (UI-3) --- */
+/*
+  Adds a consistent, high-visibility 3px focus ring for keyboard users.
+  - Uses :focus-visible for buttons etc. to avoid rings on mouse clicks.
+  - Uses a standard :focus for text inputs as is conventional.
+  - Uses theme variables for colors to support dark mode.
+*/
+:is(
+    button,
+    a,
+    [role="button"],
+    .tab-nav button,
+    details summary,
+    input[type="file"]
+):focus-visible {
+    outline: none !important;
+    box-shadow: 0 0 0 3px var(--primary-200) !important;
+    border-color: var(--primary-600) !important;
+}
+
+/* Special handling for text inputs to merge with existing style */
+input[type="text"]:focus,
+textarea:focus,
+select:focus {
+    border-color: var(--primary-500) !important;
+    box-shadow: 0 0 0 3px var(--primary-200) !important;
+    outline: none !important;
+}
+/* --- End Accessibility --- */
+
 /* Tab styling */
 .tabs {
     border-bottom: 2px solid #e5e7eb;
@@ -158,14 +188,6 @@
     transition: all 0.2s !important;
 }
 
-input[type="text"]:focus,
-textarea:focus,
-select:focus {
-    border-color: #6366f1 !important;
-    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.1) !important;
-    outline: none !important;
-}
-
 /* File upload styling */
 .file-upload {
     border: 2px dashed #d1d5db;