curo/kite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(11): TreeItem.vue — focus-visible ring on all interactive elements; skeleton width → static Tailwind

Browse Source 
- 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
This commit is contained in:
curo1305
2026-06-17 09:35:06 +02:00
parent 8ac5b15f51
commit 28e75e971d
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/TreeItem.vue
+4 -4
View File
@@ -9,7 +9,7 @@
<button <button
v-if="expandable" v-if="expandable"
@click.prevent.stop="toggleExpand" @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'" :aria-label="expanded ? 'Collapse' : 'Expand'"
> >
<AppIcon <AppIcon
@@ -24,7 +24,7 @@
<router-link <router-link
v-if="to" v-if="to"
:to="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 :class="isActive
? 'bg-indigo-50 text-indigo-700' ? 'bg-indigo-50 text-indigo-700'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'" : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'"
@@ -35,7 +35,7 @@
<button <button
v-else v-else
@click="$emit('select')" @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" /> <slot name="icon" />
<span class="truncate">{{ label }}</span> <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 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="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> </div>
<div <div