From 72ae295ce1d7c58743a45835556073c424060868 Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Fri, 25 Oct 2024 16:47:31 -0400
Subject: [PATCH] fix(ktabs): slotted anchor link (#2480)

* fix(ktabs): slotted anchor link color

* fix(ktabs): slotted link color

* fix(ktabs): slotted anchor link active

* fix(ktabs): add anchor-tabindex prop

* docs(tabs): anchor-tabindex prop
---
 docs/components/table-view.md  | 27 ++++++++++++++++----
 docs/components/tabs.md        |  4 +++
 sandbox/pages/SandboxTabs.vue  |  1 +
 src/components/KTabs/KTabs.vue | 46 +++++++++++++++++++++++++++-------
 4 files changed, 64 insertions(+), 14 deletions(-)

diff --git a/docs/components/table-view.md b/docs/components/table-view.md
index 91412aa9f0..3fb96c6559 100644
--- a/docs/components/table-view.md
+++ b/docs/components/table-view.md
@@ -518,11 +518,28 @@ The `rowKey` prop accepts either a unique string or a function that returns a un
 If a string is provided which corresponds to a property of the `row`, the unique identifier will utilize the `row[rowKey]` as the unique identifier.
 
 ```html
-<KTableView
-  row-key="id"
-  :data="tableData"
-  :headers="headers"
-/>
+<template>
+  <KTableView
+    row-key="id"
+    :data="tableData"
+    :headers="headers"
+  />
+</template>
+
+<script setup lang="ts">
+import type { TableViewData } from '@kong/kongponents'
+
+const tableData: TableViewData = [
+  {
+    id: 'a70642b3-20f2-4658-b459-fe1cbcf9e315',
+    ...
+  },
+  {
+    id: '58c599a9-f453-41f3-9e64-0a7fc6caedad',
+    ...
+  }
+]
+</script>
 ```
 
 Alternatively, if a function is passed, it allows for the creation of a custom identifier based on the row data passed to the function.
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index c6e5ba1954..f99fcfdcbc 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -176,6 +176,10 @@ const tabChange = (hash: string): void => {
 </script>
 ```
 
+### anchorTabindex
+
+This prop allows setting a custom `tabindex` for the tab anchor element. It’s useful when passing a custom interactive element, like a link, through the [`anchor` slot](#anchor-panel), ensuring that only the slotted element is focusable by resetting the default anchor `tabindex`. Default value is `0`.
+
 #### Dynamic RouterView
 
 Here's an example (code only) of utilizing a dynamic `router-view` component within the host app:
diff --git a/sandbox/pages/SandboxTabs.vue b/sandbox/pages/SandboxTabs.vue
index a75c2c7e47..62e9310063 100644
--- a/sandbox/pages/SandboxTabs.vue
+++ b/sandbox/pages/SandboxTabs.vue
@@ -111,6 +111,7 @@
       />
       <SandboxSectionComponent title="Dynamic router view without panels">
         <KTabs
+          :anchor-tabindex="-1"
           hide-panels
           :tabs="dynamicRouterViewItems"
           @change="(hash: string) => $router.replace({ hash })"
diff --git a/src/components/KTabs/KTabs.vue b/src/components/KTabs/KTabs.vue
index dfef60894d..d246079d33 100644
--- a/src/components/KTabs/KTabs.vue
+++ b/src/components/KTabs/KTabs.vue
@@ -17,12 +17,12 @@
           class="tab-link"
           :class="{ 'has-panels': !hidePanels, disabled: tab.disabled }"
           role="tab"
-          :tabindex="tab.disabled ? '-1' : '0'"
+          :tabindex="getAnchorTabindex(tab)"
           @click.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
           @keydown.enter.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
           @keydown.space.prevent="!tab.disabled ? handleTabChange(tab.hash) : undefined"
         >
-          <slot :name="`${tab.hash.replace('#','')}-anchor`">
+          <slot :name="`${getTabSlotName(tab.hash)}-anchor`">
             <span>{{ tab.title }}</span>
           </slot>
         </div>
@@ -34,13 +34,13 @@
         v-for="(tab, i) in tabs"
         :id="`panel-${i}`"
         :key="tab.hash"
-        :aria-labelledby="`${tab.hash.replace('#','')}-tab`"
+        :aria-labelledby="`${getTabSlotName(tab.hash)}-tab`"
         class="tab-container"
         role="tabpanel"
       >
         <slot
           v-if="activeTab === tab.hash"
-          :name="tab.hash.replace('#','')"
+          :name="getTabSlotName(tab.hash)"
         />
       </div>
     </template>
@@ -75,6 +75,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  anchorTabindex: {
+    type: Number,
+    default: 0,
+    validator: (val: number): boolean => val >= -1 && val <= 32767,
+  },
 })
 
 const emit = defineEmits<{
@@ -90,6 +95,16 @@ const handleTabChange = (tab: string): void => {
   emit('update:modelValue', tab)
 }
 
+const getTabSlotName = (tabHash: string): string => tabHash.replace('#', '')
+
+const getAnchorTabindex = (tab: Tab): string => {
+  if (tab.disabled) {
+    return '-1'
+  }
+
+  return typeof props.anchorTabindex === 'number' && props.anchorTabindex >= -1 && props.anchorTabindex <= 32767 ? String(props.anchorTabindex) : '0'
+}
+
 watch(() => props.modelValue, (newTabHash) => {
   activeTab.value = newTabHash
   emit('change', newTabHash)
@@ -98,6 +113,14 @@ watch(() => props.modelValue, (newTabHash) => {
 </script>
 
 <style lang="scss" scoped>
+@mixin kTabsFocus {
+  background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+  box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+  color: var(--kui-color-text, $kui-color-text);
+  outline: none;
+}
+
 .k-tabs {
   ul {
     border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
@@ -141,8 +164,12 @@ watch(() => props.modelValue, (newTabHash) => {
         }
 
         a, :deep(a) {
-          color: var(--kui-color-text, $kui-color-text);
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
           text-decoration: none;
+
+          &:focus-visible {
+            @include kTabsFocus;
+          }
         }
 
         &:hover:not(.disabled) {
@@ -150,10 +177,7 @@ watch(() => props.modelValue, (newTabHash) => {
         }
 
         &:focus-visible {
-          background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
-          box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
-          color: var(--kui-color-text, $kui-color-text);
-          outline: none;
+          @include kTabsFocus;
         }
 
         &.disabled {
@@ -167,6 +191,10 @@ watch(() => props.modelValue, (newTabHash) => {
 
         .tab-link {
           color: var(--kui-color-text, $kui-color-text);
+
+          a, :deep(a) {
+            color: var(--kui-color-text, $kui-color-text);
+          }
         }
       }
     }