From 84843459b4f8916caf8d8df15f546d4adcce7d71 Mon Sep 17 00:00:00 2001
From: nioasoft <your-email@example.com>
Date: Sun, 25 Jan 2026 09:36:48 +0200
Subject: [PATCH] fix: add keyboard accessibility and improve env var
 validation

Add focus-visible styles for keyboard navigation accessibility and
improve PLAYWRIGHT_HEADLESS environment variable validation to warn
users about invalid values instead of silently defaulting.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 client.py                      | 10 +++++++---
 ui/src/styles/custom-theme.css | 26 ++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/client.py b/client.py
index 4bf3669..2311445 100644
--- a/client.py
+++ b/client.py
@@ -50,9 +50,13 @@ def get_playwright_headless() -> bool:
     Reads from PLAYWRIGHT_HEADLESS environment variable, defaults to True.
     Returns True for headless mode (invisible browser), False for visible browser.
     """
-    value = os.getenv("PLAYWRIGHT_HEADLESS", str(DEFAULT_PLAYWRIGHT_HEADLESS).lower()).lower()
-    # Accept various truthy/falsy values
-    return value in ("true", "1", "yes", "on")
+    value = os.getenv("PLAYWRIGHT_HEADLESS", str(DEFAULT_PLAYWRIGHT_HEADLESS).lower()).strip().lower()
+    truthy = {"true", "1", "yes", "on"}
+    falsy = {"false", "0", "no", "off"}
+    if value not in truthy | falsy:
+        print(f"   - Warning: Invalid PLAYWRIGHT_HEADLESS='{value}', defaulting to {DEFAULT_PLAYWRIGHT_HEADLESS}")
+        return DEFAULT_PLAYWRIGHT_HEADLESS
+    return value in truthy
 
 
 def get_playwright_browser() -> str:
diff --git a/ui/src/styles/custom-theme.css b/ui/src/styles/custom-theme.css
index 69748ba..1d7a032 100644
--- a/ui/src/styles/custom-theme.css
+++ b/ui/src/styles/custom-theme.css
@@ -172,6 +172,32 @@ select:focus {
   outline: none !important;
 }
 
+/* ===== KEYBOARD ACCESSIBILITY ===== */
+/* Focus-visible styles for keyboard navigation */
+.neo-btn:focus-visible,
+[class*="neo-btn"]:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--color-neo-accent) !important;
+  outline-offset: 2px !important;
+}
+
+.neo-input:focus-visible,
+.neo-textarea:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--color-neo-accent) !important;
+  outline-offset: 2px !important;
+  border-color: var(--color-neo-accent) !important;
+}
+
+a:focus-visible,
+[role="button"]:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--color-neo-accent) !important;
+  outline-offset: 2px !important;
+}
+
 /* ===== BADGES ===== */
 .neo-badge,
 [class*="neo-badge"] {