fix(ktreelist): focus visible state [KHCP-9008]

Kong · Mar 13, 2024 · 37f5097 · 37f5097
1 parent 30b8ea0
commit 37f5097
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/components/KTreeList/KTreeItem.vue b/src/components/KTreeList/KTreeItem.vue
@@ -83,9 +83,10 @@ const handleClick = () => {
   font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
   gap: var(--kui-space-20, $kui-space-20);
   line-height: var(--kui-line-height-30, $kui-line-height-30);
+  outline: none;
   padding: var(--kui-space-30, $kui-space-30);
   text-decoration: none;
-  transition: background-color $kongponentsTransitionDurTimingFunc, color $kongponentsTransitionDurTimingFunc;
+  transition: background-color $kongponentsTransitionDurTimingFunc, color $kongponentsTransitionDurTimingFunc, border-color $kongponentsTransitionDurTimingFunc, box-shadow $kongponentsTransitionDurTimingFunc;
   user-select: none;
   width: 100%;
 
@@ -111,6 +112,11 @@ const handleClick = () => {
     cursor: grab;
   }
 
+  &:focus-visible {
+    background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+    box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+  }
+
   &.not-draggable {
     cursor: pointer;
   }