From d3554951e009285bbaec982bda809a98d3e84503 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 11:23:23 +0100
Subject: [PATCH] fix(a11y): privacy badge role/label and stronger search focus
 ring in light theme

---
 src/design-system/colors_and_type.css | 9 +++++++++
 src/lib/pages/SettingsPage.svelte     | 4 +++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/design-system/colors_and_type.css b/src/design-system/colors_and_type.css
index 3acad8b..96dd4b0 100644
--- a/src/design-system/colors_and_type.css
+++ b/src/design-system/colors_and_type.css
@@ -117,6 +117,11 @@
   --shadow-lg: 0 12px 28px rgba(0,0,0,0.35);
   --shadow-accent: 0 4px 20px rgba(214,132,80,0.3);
 
+  /* — Focus ring shadow on inputs. Theme-aware so the ring stays visible
+     on the lighter cream surfaces in light theme, where a 0.1 alpha amber
+     glow disappears against white. — */
+  --accent-shadow-focus: rgba(214, 132, 80, 0.1);
+
   /* — Typography — */
   --font-body: 'Lexend', system-ui, -apple-system, sans-serif;
   --font-display: 'Instrument Serif', Georgia, serif;
@@ -186,6 +191,10 @@
 
   /* Warm dim for modal scrim in light theme. */
   --overlay-dim: rgba(26, 24, 22, 0.55);
+
+  /* Stronger alpha on the focus ring shadow so it reads against the
+     cream surfaces. Uses the darker light-theme accent base. */
+  --accent-shadow-focus: rgba(163, 104, 58, 0.18);
 }
 
 /* ============================================================
diff --git a/src/lib/pages/SettingsPage.svelte b/src/lib/pages/SettingsPage.svelte
index 6be4c90..a94cf32 100644
--- a/src/lib/pages/SettingsPage.svelte
+++ b/src/lib/pages/SettingsPage.svelte
@@ -1070,6 +1070,8 @@
              visible while the user moves through the settings tree. -->
         <span
           class="text-[12px] text-text-secondary bg-accent-subtle rounded-full px-2.5 py-1"
+          role="status"
+          aria-label="Privacy posture: 100% local, no telemetry, no cloud"
         >100% local · no telemetry · no cloud</span>
       </div>
     </div>
@@ -1080,7 +1082,7 @@
         placeholder="Search settings"
         bind:value={settingsSearch}
         class="w-full bg-bg-input border border-border rounded-lg pl-9 pr-9 py-2 text-[13px] text-text placeholder:text-text-tertiary
-               focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_rgba(214,132,80,0.1)]"
+               focus:outline-none focus:border-accent focus:shadow-[0_0_0_3px_var(--accent-shadow-focus)]"
         aria-label="Search settings"
       />
       {#if searchActive}