From 28e75e971d09f83b647bcbe5e9fa10ece2e13105 Mon Sep 17 00:00:00 2001
From: curo1305 <curo1305@proton.me>
Date: Wed, 17 Jun 2026 09:35:06 +0200
Subject: [PATCH] =?UTF-8?q?fix(11):=20TreeItem.vue=20=E2=80=94=20focus-vis?=
 =?UTF-8?q?ible=20ring=20on=20all=20interactive=20elements;=20skeleton=20w?=
 =?UTF-8?q?idth=20=E2=86=92=20static=20Tailwind?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Expand/collapse button, router-link label, and button label all get focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1
- :style skeleton width replaced with :class w-12/w-16/w-20 (same fix applied to AppSidebar in 11-05)
- Closes VISUAL-01 and VISUAL-03 gaps found by verifier
---
 frontend/src/components/ui/TreeItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ui/TreeItem.vue b/frontend/src/components/ui/TreeItem.vue
index 1dcecd5..d540151 100644
--- a/frontend/src/components/ui/TreeItem.vue
+++ b/frontend/src/components/ui/TreeItem.vue
@@ -9,7 +9,7 @@
       <button
         v-if="expandable"
         @click.prevent.stop="toggleExpand"
-        class="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-gray-600 shrink-0 transition-colors"
+        class="w-5 h-5 flex items-center justify-center text-gray-400 hover:text-gray-600 shrink-0 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 rounded"
         :aria-label="expanded ? 'Collapse' : 'Expand'"
       >
         <AppIcon
@@ -24,7 +24,7 @@
       <router-link
         v-if="to"
         :to="to"
-        class="flex items-center gap-2 flex-1 min-w-0 px-2 py-1.5 rounded-lg text-sm font-medium transition-colors"
+        class="flex items-center gap-2 flex-1 min-w-0 px-2 py-1.5 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
         :class="isActive
           ? 'bg-indigo-50 text-indigo-700'
           : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'"
@@ -35,7 +35,7 @@
       <button
         v-else
         @click="$emit('select')"
-        class="flex items-center gap-2 flex-1 min-w-0 px-2 py-1.5 rounded-lg text-sm font-medium transition-colors text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+        class="flex items-center gap-2 flex-1 min-w-0 px-2 py-1.5 rounded-lg text-sm font-medium transition-colors text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1"
       >
         <slot name="icon" />
         <span class="truncate">{{ label }}</span>
@@ -51,7 +51,7 @@
       >
         <div v-for="n in 3" :key="`sk-t-${n}`" class="flex items-center gap-2 py-1">
           <div class="w-4 h-4 bg-gray-100 rounded animate-pulse shrink-0"></div>
-          <div class="h-3 bg-gray-100 rounded animate-pulse" :style="{ width: (50 + n * 15) + 'px' }"></div>
+          <div class="h-3 bg-gray-100 rounded animate-pulse" :class="n === 1 ? 'w-12' : n === 2 ? 'w-16' : 'w-20'"></div>
         </div>
       </div>
       <div