From 9015db565e50e47067dd9fda8abae686e2cc3b3e Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 13:25:00 +0200
Subject: [PATCH] feat(11-01): MD3 focus-visible ring-3 indicators on all
 interactive elements

- md3-buttons.ts: upgrade ring-2/50 to ring-3 on all three constants (FILLED, OUTLINED, TEXT)
- BackendCard: add focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary
- StepIndicator: upgrade group-focus-visible completed-step circle from ring-2/50 to ring-3
- ThemeToggle: add focus-visible ring-3 with ring-inset to both selected/unselected branches
- FieldRenderer: select uses focus-visible:ring-2 (was focus:ring-2); tooltip buttons get focus-visible:ring-2 rounded
---
 src/components/ui/BackendCard.tsx       | 2 +-
 src/components/ui/FieldRenderer.tsx     | 6 +++---
 src/components/ui/ThemeToggle.tsx       | 4 ++--
 src/components/wizard/StepIndicator.tsx | 2 +-
 src/styles/md3-buttons.ts               | 6 +++---
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/BackendCard.tsx b/src/components/ui/BackendCard.tsx
index 18739fc..7fab752 100644
--- a/src/components/ui/BackendCard.tsx
+++ b/src/components/ui/BackendCard.tsx
@@ -14,7 +14,7 @@ export function BackendCard({ name, description, selected = false, onClick, ...r
       onClick={onClick}
       data-selected={selected}
       className={[
-        'w-full flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all',
+        'w-full flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary',
         selected
           ? 'border-primary bg-primary/10 shadow-md'
           : 'border-outline bg-surface-container shadow hover:border-primary hover:bg-surface hover:shadow-md',
diff --git a/src/components/ui/FieldRenderer.tsx b/src/components/ui/FieldRenderer.tsx
index dc4167f..8e33a49 100644
--- a/src/components/ui/FieldRenderer.tsx
+++ b/src/components/ui/FieldRenderer.tsx
@@ -53,7 +53,7 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
               onMouseEnter={() => setHoverTooltip(true)}
               onMouseLeave={() => setHoverTooltip(false)}
               aria-label={`More info about ${field.label}`}
-              className="text-primary hover:text-primary text-xs leading-none"
+              className="text-primary hover:text-primary text-xs leading-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"
             >
               ⓘ
             </button>
@@ -67,7 +67,7 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
         <select
           id={field.key}
           className={[
-            'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2',
+            'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus-visible:ring-2',
             error ? 'border-error focus:ring-error/50' : 'border-outline focus:ring-primary/50',
           ].join(' ')}
           {...register(field.key)}
@@ -90,7 +90,7 @@ export function FieldRenderer({ field, register, error }: FieldRendererProps) {
       onMouseEnter={() => setHoverTooltip(true)}
       onMouseLeave={() => setHoverTooltip(false)}
       aria-label={`More info about ${field.label}`}
-      className="text-primary hover:text-primary/80 text-xs leading-none mt-px shrink-0"
+      className="text-primary hover:text-primary/80 text-xs leading-none mt-px shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"
     >
       ⓘ
     </button>
diff --git a/src/components/ui/ThemeToggle.tsx b/src/components/ui/ThemeToggle.tsx
index ea12a1b..f0a7b69 100644
--- a/src/components/ui/ThemeToggle.tsx
+++ b/src/components/ui/ThemeToggle.tsx
@@ -58,8 +58,8 @@ export function ThemeToggle() {
           aria-pressed={theme === v}
           className={
             theme === v
-              ? 'flex-1 px-3 py-1 bg-primary text-on-primary font-medium'
-              : 'flex-1 px-3 py-1 bg-surface-container text-on-surface-container hover:bg-surface'
+              ? 'flex-1 px-3 py-1 bg-primary text-on-primary font-medium focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary focus-visible:ring-inset'
+              : 'flex-1 px-3 py-1 bg-surface-container text-on-surface-container hover:bg-surface focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary focus-visible:ring-inset'
           }
         >
           {LABELS[v]}
diff --git a/src/components/wizard/StepIndicator.tsx b/src/components/wizard/StepIndicator.tsx
index b9de8bf..afd3c6c 100644
--- a/src/components/wizard/StepIndicator.tsx
+++ b/src/components/wizard/StepIndicator.tsx
@@ -39,7 +39,7 @@ export function StepIndicator() {
                     aria-label={`Go to step ${i + 1}: ${label}`}
                     className="flex flex-col items-center gap-1 group focus-visible:outline-none"
                   >
-                    <span className="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-medium group-focus-visible:ring-2 group-focus-visible:ring-primary/50">
+                    <span className="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-medium group-focus-visible:ring-3 group-focus-visible:ring-primary">
                       &#10003;
                     </span>
                     <span className="text-xs text-primary hidden sm:block">{label}</span>
diff --git a/src/styles/md3-buttons.ts b/src/styles/md3-buttons.ts
index 72a22c2..c651234 100644
--- a/src/styles/md3-buttons.ts
+++ b/src/styles/md3-buttons.ts
@@ -11,16 +11,16 @@ export const MD3_BTN_FILLED =
   'px-6 py-2.5 rounded-full bg-primary text-on-primary text-sm font-medium ' +
   'hover:opacity-90 active:opacity-80 transition-opacity ' +
   'disabled:opacity-40 disabled:cursor-not-allowed ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
+  'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary';
 
 export const MD3_BTN_OUTLINED =
   'px-6 py-2.5 rounded-full border border-outline text-on-surface text-sm font-medium ' +
   'hover:bg-primary/8 active:bg-primary/12 transition-colors ' +
   'disabled:opacity-40 disabled:cursor-not-allowed ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
+  'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary';
 
 export const MD3_BTN_TEXT =
   'px-4 py-2.5 rounded-full text-primary text-sm font-medium ' +
   'hover:bg-primary/8 active:bg-primary/12 transition-colors ' +
   'disabled:opacity-40 disabled:cursor-not-allowed ' +
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
+  'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-primary';