fix(kbadge): tabindex when has tooltip (#2618)

* fix(kbadge): tabindex when has tooltip * fix: lint:fix
Kong · Feb 14, 2025 · 2d893b6 · 2d893b6
1 parent a3d610b
commit 2d893b6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -127,6 +127,10 @@ A string to be used as `id` attribute on underlying `role="tooltip"` element. Us
 
 The `default` slot takes in the element you want the popover to be triggered over.
 
+:::tip NOTE
+Make sure to set appropriate `tabindex` attribute on your tooltip trigger element in order to make popover accessible for assistive technology users.
+:::
+
 ```html
 <KTooltip text="A simple tooltip.">
   <KButton>Button</KButton>

diff --git a/src/components/KBadge/KBadge.vue b/src/components/KBadge/KBadge.vue
@@ -3,13 +3,11 @@
     class="k-badge"
     :class="[appearance, { 'method': isMethodBadge }]"
   >
-    <component
-      :is="showTooltip ? 'KTooltip' : 'div'"
-      :text="showTooltip ? tooltip : undefined"
-    >
+    <KTooltip :text="showTooltip ? tooltip : undefined">
       <div
         class="badge-content"
         :class="{ 'icon-after': !iconBefore }"
+        :tabindex="showTooltip ? 0 : undefined"
       >
         <slot
           v-if="$slots.icon"
@@ -22,7 +20,7 @@
           <slot />
         </div>
       </div>
-    </component>
+    </KTooltip>
   </div>
 </template>
 
@@ -40,6 +38,7 @@ const { getSizeFromString } = useUtilities()
 // Must explicitly define components so KTooltip works in tests
 export default {
   name: 'KBadge',
+  // eslint-disable-next-line vue/no-unused-components
   components: { KButton, KTooltip },
 }
 </script>