fix(ktabs): allow tab anchors to be links [KHCP-13866]

docs/components/tabs.md

@@ -30,12 +30,18 @@ Required prop, which is an array of tab objects with the following interface:
 
 ```ts
 interface Tab {
-  hash: string // has to be unique, corresponds to the panel slot name
+  hash: string
   title: string
-  disabled?: boolean
+  disabled?: boolean,
+  to?: string | object
 }
 ```
 
+* `hash` - has to be unique, corresponds to the panel slot name
+* `title` - title to be displayed in the tab
+* `disabled` - whether or not tab is disabled
+* `to` - if present, tab will be rendered as either a `router-link` or an `a`
+
 <KTabs :tabs="tabsWithDisabled">
   <template #tab1>
     <p>Tab 1 content</p>
@@ -176,41 +182,6 @@ 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:
-
-```html
-<KTabs
-  hide-panels
-  :tabs="tabs"
->
-  <template
-    v-for="tab in tabs"
-    :key="`${tab.hash}-anchor`"
-    #[`${tab.hash}-anchor`]
-  >
-    <router-link
-      :to="{
-        name: tab.hash.split('?').shift(),
-        hash: `#${tab.hash.split('?').pop()}`,
-      }"
-    >
-      {{ tab.title }}
-    </router-link>
-  </template>
-</KTabs>
-
-<router-view v-slot="{ route }">
-  <h3>Router View content</h3>
-  <p>{{ route.path }}{{ route.hash }}</p>
-</router-view>
-```
-
 ## Slots
 
 ### anchor & panel
@@ -297,6 +268,43 @@ const tabs = ref<Tab[]>([
 </script>
 ```
 
+## Usage
+
+### Tab links
+
+Passing `to` property for each tab object allows to render tabs as links. If a string is passed, it will be used in `href` attribute in the rendered `a` element. If an object is passed, the tab will be rendered as a `router-link`.
+
+<KTabs :tabs="linkTabs" hide-panels v-model="linkTabValue" />
+
+{{ linkTabValue }}
+
+```vue
+<template>
+  <KTabs :tabs="linkTabs" hide-panels />
+
+  <router-view v-slot="{ route }">
+    {{ route.hash }}
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { Tab } from '@kong/kongponents'
+
+const linkTabs = ref<Tab[]>([
+  {
+    hash: '#tab1',
+    title: 'Tab 1',
+    to: '#tab-link-1'
+  },
+  {
+    hash: '#tab2',
+    title: 'Tab 2',
+    to: '#tab-link-2'
+  },
+])
+</script>
+```
+
 <script setup lang="ts">
 import { ref } from 'vue'
 import { KongIcon, InboxNotificationIcon, BookIcon } from '@kong/icons'
@@ -322,6 +330,20 @@ const slottedTabs = ref<Tab[]>([
   { hash: '#disabled', title: 'Disabled', disabled: true }
 ])
 
+const linkTabValue = ref<string>('#tab-link-1')
+const linkTabs = ref<Tab[]>([
+  {
+    hash: '#tab-link-1',
+    title: 'Tab 1',
+    to: '#tab-link-1',
+  },
+  {
+    hash: '#tab-link-2',
+    title: 'Tab 2',
+    to: '#tab-link-2',
+  },
+])
+
 const panelsActiveHash = ref('#gateway')
 
 const panelsChange = (hash: string) => {

sandbox/pages/SandboxTabs.vue

@@ -111,25 +111,11 @@
       />
       <SandboxSectionComponent title="Dynamic router view without panels">
         <KTabs
-          :anchor-tabindex="-1"
           hide-panels
           :tabs="dynamicRouterViewItems"
           @change="(hash: string) => $router.replace({ hash })"
-        >
-          <template #one-anchor>
-            <router-link :to="{ hash: '#one' }">
-              One
-            </router-link>
-          </template>
-          <template #two-anchor>
-            <router-link :to="{ hash: '#two' }">
-              Two
-            </router-link>
-          </template>
-        </KTabs>
-        <router-view
-          v-slot="{route}"
-        >
+        />
+        <router-view v-slot="{ route }">
           <p>{{ route.path }}{{ route.hash }}</p>
         </router-view>
       </SandboxSectionComponent>
@@ -174,10 +160,12 @@ const dynamicRouterViewItems = [
   {
     title: 'One',
     hash: '#one',
+    to: { hash: '#one' },
   },
   {
     title: 'Two',
     hash: '#two',
+    to: { hash: '#two' },
   },
 ]
 </script>

src/components/KCodeBlock/KCodeBlock.vue

@@ -397,7 +397,7 @@ const matchingLineNumbers = ref<number[]>([])
 const currentLineIndex = ref<null | number>(null)
 
 const totalLines = computed((): number[] => Array.from({ length: props.code?.split('\n').length }, (_, index) => index + 1))
-const maxLineNumberWidth = computed((): string => totalLines.value[totalLines.value.length - 1]?.toString().length + 'ch')
+const maxLineNumberWidth = computed((): string => totalLines.value[totalLines.value?.length - 1]?.toString().length + 'ch')
 const linePrefix = computed((): string => props.id.toLowerCase().replace(/\s+/g, '-'))
 const isProcessing = computed((): boolean => props.processing || isProcessingInternally.value)
 const isShowingFilteredCode = computed((): boolean => isFilterMode.value && filteredCode.value !== '')

src/components/KTabs/KTabs.cy.ts

@@ -42,7 +42,7 @@ describe('KTabs', () => {
     })
   })
 
-  it('hides the panel content when `hidePanels` is true', () => {
+  it('hides the panel content when hidePanels is true', () => {
     const picturesSlot = 'I love pictures'
     const moviesSlot = 'I love pictures'
     const booksSlot = 'I love pictures'
@@ -75,7 +75,7 @@ describe('KTabs', () => {
 
   // handles disabled item correctly
 
-  it('disables the tab item when `disabled` is true', () => {
+  it('disables the tab item when disabled is true', () => {
     const tabs = [
       { hash: '#pictures', title: 'Pictures' },
       { hash: '#movies', title: 'Movies', disabled: true },
@@ -94,6 +94,38 @@ describe('KTabs', () => {
     })
   })
 
+  it('renders the tab as a link if tab.to is present', () => {
+    const tabs = [
+      { hash: '#pictures', title: 'Pictures' },
+      { hash: '#movies', title: 'Movies', to: '/movies' },
+      { hash: '#books', title: 'Books' },
+    ]
+
+    cy.mount(KTabs, {
+      props: {
+        tabs,
+      },
+    })
+
+    cy.get('.tab-item .tab-link').eq(1).should('have.attr', 'href', '/movies')
+  })
+
+  it('renders the tab as a link with no href attribute if tab.to is present and tab.disabled is true', () => {
+    const tabs = [
+      { hash: '#pictures', title: 'Pictures' },
+      { hash: '#movies', title: 'Movies', to: '/movies', disabled: true },
+      { hash: '#books', title: 'Books' },
+    ]
+
+    cy.mount(KTabs, {
+      props: {
+        tabs,
+      },
+    })
+
+    cy.get('.tab-item .tab-link').eq(1).should('not.have.attr', 'href')
+  })
+
   describe('slots', () => {
     it('provides the #hash slot content', () => {
       const picturesSlot = 'I love pictures'

src/components/KTabs/KTabs.vue

@@ -2,7 +2,7 @@
   <div class="k-tabs">
     <ul
       aria-label="Tabs"
-      role="tablist"
+      :role="isNav ? 'navigation' : 'tablist'"
     >
       <li
         v-for="tab in tabs"
@@ -11,21 +11,24 @@
         class="tab-item"
         :class="{ active: activeTab === tab.hash }"
       >
-        <div
+        <component
+          :is="tabComponent(tab).tag"
           :aria-controls="hidePanels ? undefined : `panel-${tab.hash}`"
           :aria-selected="hidePanels ? undefined : (activeTab === tab.hash ? 'true' : 'false')"
           class="tab-link"
-          :class="{ 'has-panels': !hidePanels, disabled: tab.disabled }"
-          role="tab"
+          :class="{ disabled: tab.disabled }"
+          :role="isNav ? 'link' : 'tab'"
           :tabindex="getAnchorTabindex(tab)"
+          v-bind="tabComponent(tab).attributes"
+          @click="!tab.disabled ? handleTabChange(tab.hash) : undefined"
           @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="`${getTabSlotName(tab.hash)}-anchor`">
             <span>{{ tab.title }}</span>
           </slot>
-        </div>
+        </component>
       </li>
     </ul>
 
@@ -49,7 +52,7 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { Tab } from '@/types'
 
 const props = defineProps({
@@ -75,6 +78,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * @deprecated
+   */
   anchorTabindex: {
     type: Number,
     default: 0,
@@ -89,6 +95,8 @@ const emit = defineEmits<{
 
 const activeTab = ref<string>(props.modelValue ? props.modelValue : props.tabs[0]?.hash)
 
+const isNav = computed((): boolean => props.tabs.every(tab => tab.to))
+
 const handleTabChange = (tab: string): void => {
   activeTab.value = tab
   emit('change', tab)
@@ -105,6 +113,18 @@ const getAnchorTabindex = (tab: Tab): string => {
   return typeof props.anchorTabindex === 'number' && props.anchorTabindex >= -1 && props.anchorTabindex <= 32767 ? String(props.anchorTabindex) : '0'
 }
 
+const tabComponent = (tab: Tab) => {
+  if (tab.to) {
+    if (typeof tab.to === 'string') {
+      return { tag: 'a', attributes: { href: tab.disabled ? undefined : tab.to } }
+    } else if (typeof tab.to === 'object') {
+      return { tag: 'router-link', attributes: { to: tab.disabled ? undefined : tab.to } }
+    }
+  }
+
+  return { tag: 'div', attributes: {} }
+}
+
 watch(() => props.modelValue, (newTabHash) => {
   activeTab.value = newTabHash
   emit('change', newTabHash)
@@ -125,11 +145,7 @@ watch(() => props.modelValue, (newTabHash) => {
   ul {
     border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     display: flex;
-    font-family: var(--kui-font-family-text, $kui-font-family-text);
-    font-size: var(--kui-font-size-30, $kui-font-size-30);
-    font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
     gap: var(--kui-space-40, $kui-space-40);
-    line-height: var(--kui-line-height-40, $kui-line-height-40);
     list-style: none;
     margin-bottom: var(--kui-space-70, $kui-space-70);
     margin-top: var(--kui-space-0, $kui-space-0);
@@ -148,30 +164,23 @@ watch(() => props.modelValue, (newTabHash) => {
       white-space: nowrap;
 
       .tab-link {
+        @include defaultButtonReset;
+        align-items: center;
+
         border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
         color: var(--kui-color-text-neutral, $kui-color-text-neutral);
         cursor: pointer;
         display: inline-flex;
+        font-family: var(--kui-font-family-text, $kui-font-family-text);
+        font-size: var(--kui-font-size-30, $kui-font-size-30);
+        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
         gap: var(--kui-space-40, $kui-space-40);
+        line-height: var(--kui-line-height-40, $kui-line-height-40);
+        padding: var(--kui-space-30, $kui-space-30) var(--kui-space-50, $kui-space-50);
         text-decoration: none;
         transition: color $kongponentsTransitionDurTimingFunc, background-color $kongponentsTransitionDurTimingFunc, box-shadow $kongponentsTransitionDurTimingFunc;
         user-select: none;
 
-        // Applies the padding to the tab’s content when not showing panels which is typically used for placing links inside KTabs for navigational tabs. Otherwise, clicking the tab outside of the link’s box will mark it as active but won’t actually navigate.
-        &.has-panels,
-        &:not(.has-panels) :deep(> *) {
-          padding: var(--kui-space-30, $kui-space-30) var(--kui-space-50, $kui-space-50);
-        }
-
-        a, :deep(a) {
-          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-          text-decoration: none;
-
-          &:focus-visible {
-            @include kTabsFocus;
-          }
-        }
-
         &:hover:not(.disabled) {
           background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
         }
@@ -184,6 +193,15 @@ watch(() => props.modelValue, (newTabHash) => {
           color: var(--kui-color-text-disabled, $kui-color-text-disabled);
           cursor: not-allowed;
         }
+
+        :slotted(a) {
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+          text-decoration: none;
+
+          &:focus-visible {
+            @include kTabsFocus;
+          }
+        }
       }
 
       &.active {

src/types/tabs.ts

@@ -1,5 +1,8 @@
 export interface Tab {
+  /** Has to be unique, corresponds to the panel slot name */
   hash: string
   title: string
   disabled?: boolean
+  /** If present, tab will be rendered as either a router-link or an anchor  */
+  to?: string | object
 }