refactor: rebuild Tab/TabList on reka-ui TabsTrigger for ARIA and keyboard nav

Amp-Thread-ID: https://ampcode.com/threads/T-019cdb2f-a7a6-74fb-bc4b-f2c1dfa428f2
Co-authored-by: Amp <amp@ampcode.com>

Author: viva-jinyi

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
+import { TabsTrigger } from 'reka-ui'
 import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
@@ -105,8 +106,8 @@ describe('NodeLibrarySidebarTabV2', () => {
   it('should render with tabs', () => {
     const wrapper = mountComponent()
 
-    const tabs = wrapper.findAll('[role="tab"]')
-    expect(tabs).toHaveLength(3)
+    const triggers = wrapper.findAllComponents(TabsTrigger)
+    expect(triggers).toHaveLength(3)
   })
 
   it('should render search box', () => {

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -106,42 +106,44 @@
           </DropdownMenuRoot>
         </template>
       </SidebarTopArea>
-      <!-- Tab list in header (fixed) -->
-      <div class="border-b border-comfy-input px-2 pt-2 pb-1 2xl:px-4">
-        <TabList v-model="selectedTab">
-          <Tab v-for="tab in tabs" :key="tab.value" :value="tab.value">
-            {{ tab.label }}
-          </Tab>
-        </TabList>
-      </div>
     </template>
     <template #body>
       <NodeDragPreview />
-      <!-- Tab content (scrollable) -->
-      <TabsRoot v-model="selectedTab" class="h-full py-2">
-        <EssentialNodesPanel
-          v-if="
-            flags.nodeLibraryEssentialsEnabled && selectedTab === 'essentials'
-          "
-          v-model:expanded-keys="expandedKeys"
-          :root="renderedEssentialRoot"
-          :flat-nodes="essentialFlatNodes"
-          @node-click="handleNodeClick"
-        />
-        <AllNodesPanel
-          v-if="selectedTab === 'all'"
-          v-model:expanded-keys="expandedKeys"
-          :sections="renderedSections"
-          :fill-node-info="fillNodeInfo"
-          :sort-order="sortOrder"
-          @node-click="handleNodeClick"
-        />
-        <BlueprintsPanel
-          v-if="selectedTab === 'blueprints'"
-          v-model:expanded-keys="expandedKeys"
-          :sections="renderedBlueprintsSections"
-          @node-click="handleNodeClick"
-        />
+      <TabsRoot v-model="selectedTab" class="flex h-full flex-col">
+        <!-- Tab list in header (fixed) -->
+        <div class="border-b border-comfy-input px-2 pt-2 pb-1 2xl:px-4">
+          <TabsList class="flex w-full items-center gap-2">
+            <Tab v-for="tab in tabs" :key="tab.value" :value="tab.value">
+              {{ tab.label }}
+            </Tab>
+          </TabsList>
+        </div>
+        <!-- Tab content (scrollable) -->
+        <div class="min-h-0 flex-1 overflow-y-auto py-2">
+          <EssentialNodesPanel
+            v-if="
+              flags.nodeLibraryEssentialsEnabled && selectedTab === 'essentials'
+            "
+            v-model:expanded-keys="expandedKeys"
+            :root="renderedEssentialRoot"
+            :flat-nodes="essentialFlatNodes"
+            @node-click="handleNodeClick"
+          />
+          <AllNodesPanel
+            v-if="selectedTab === 'all'"
+            v-model:expanded-keys="expandedKeys"
+            :sections="renderedSections"
+            :fill-node-info="fillNodeInfo"
+            :sort-order="sortOrder"
+            @node-click="handleNodeClick"
+          />
+          <BlueprintsPanel
+            v-if="selectedTab === 'blueprints'"
+            v-model:expanded-keys="expandedKeys"
+            :sections="renderedBlueprintsSections"
+            @node-click="handleNodeClick"
+          />
+        </div>
       </TabsRoot>
     </template>
   </SidebarTabTemplate>
@@ -158,14 +160,14 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuRoot,
   DropdownMenuTrigger,
+  TabsList,
   TabsRoot
 } from 'reka-ui'
 import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
 import Tab from '@/components/tab/Tab.vue'
-import TabList from '@/components/tab/TabList.vue'
 import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import SidebarTopArea from '@/components/sidebar/tabs/SidebarTopArea.vue'

src/components/tab/Tab.vue

@@ -1,48 +1,30 @@
 <template>
-  <button
-    :id="tabId"
-    :class="tabClasses"
-    role="tab"
-    :aria-selected="isActive"
-    :aria-controls="panelId"
-    :tabindex="0"
-    @click="handleClick"
+  <TabsTrigger
+    :value="value"
+    :class="
+      cn(
+        'flex shrink-0 items-center justify-center',
+        'cursor-pointer rounded-lg px-2.5 py-2 text-sm transition-all duration-200',
+        'border-none outline-hidden',
+        'data-[state=active]:text-bold data-[state=active]:bg-interface-menu-component-surface-hovered data-[state=active]:text-text-primary',
+        'data-[state=inactive]:bg-transparent data-[state=inactive]:text-text-secondary data-[state=inactive]:hover:bg-button-hover-surface data-[state=inactive]:focus:bg-button-hover-surface',
+        props.class
+      )
+    "
   >
     <slot />
-  </button>
+  </TabsTrigger>
 </template>
 
 <script setup lang="ts" generic="T extends string = string">
-import type { Ref } from 'vue'
-import { computed, inject } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+import { TabsTrigger } from 'reka-ui'
 
 import { cn } from '@/utils/tailwindUtil'
 
-const { value, panelId } = defineProps<{
+const props = defineProps<{
   value: T
-  panelId?: string
+  class?: HTMLAttributes['class']
 }>()
-
-const currentValue = inject<Ref<T>>('tabs-value')
-const updateValue = inject<(value: T) => void>('tabs-update')
-
-const tabId = computed(() => `tab-${value}`)
-const isActive = computed(() => currentValue?.value === value)
-
-const tabClasses = computed(() => {
-  return cn(
-    // Base styles from TextButton
-    'flex shrink-0 items-center justify-center',
-    'cursor-pointer rounded-lg px-2.5 py-2 text-sm transition-all duration-200',
-    'border-none outline-hidden',
-    // State styles with semantic tokens
-    isActive.value
-      ? 'text-bold bg-interface-menu-component-surface-hovered text-text-primary'
-      : 'bg-transparent text-text-secondary hover:bg-button-hover-surface focus:bg-button-hover-surface'
-  )
-})
-
-const handleClick = () => {
-  updateValue?.(value)
-}
 </script>

src/components/tab/TabList.vue

@@ -1,17 +1,15 @@
 <template>
-  <div role="tablist" class="flex w-full items-center gap-2 pb-1">
-    <slot />
-  </div>
+  <TabsRoot v-model="modelValue">
+    <TabsList as-child>
+      <div role="tablist" class="flex w-full items-center gap-2">
+        <slot />
+      </div>
+    </TabsList>
+  </TabsRoot>
 </template>
 
 <script setup lang="ts" generic="T extends string = string">
-import { provide } from 'vue'
+import { TabsList, TabsRoot } from 'reka-ui'
 
 const modelValue = defineModel<T>({ required: true })
-
-// Provide for child Tab components
-provide('tabs-value', modelValue)
-provide('tabs-update', (value: T) => {
-  modelValue.value = value
-})
 </script>