fix: use v-if instead of v-show in TabPanel

Author: graphieros

app/components/Compare/FacetScatterChart.vue

@@ -11,7 +11,6 @@ import('vue-data-ui/style.css')
 const props = defineProps<{
   packagesData: ReadonlyArray<PackageComparisonData | null>
   packages: string[]
-  isActiveTab: boolean
 }>()
 
 const colorMode = useColorMode()
@@ -289,17 +288,6 @@ onMounted(async () => {
   await nextTick()
   readyTeleport.value = true
 })
-
-// When he tab contents are hidden through v-show on load, the chart is mounted, but its internal autosizing feature trigger on an empty size, which leads to overlapping between scale labels and axis label on Y. This triggers a re-render of the chart when the tab is active.
-watch(
-  () => props.isActiveTab,
-  isActive => {
-    if (isActive) {
-      step.value += 1
-    }
-  },
-  { flush: 'post' },
-)
 </script>
 
 <template>

app/components/Tab/Panel.vue

@@ -21,7 +21,7 @@ const resolvedTabId = computed(() => getTabId(props.value))
 
 <template>
   <div
-    v-show="isSelected"
+    v-if="isSelected"
     :id="resolvedPanelId"
     role="tabpanel"
     :aria-labelledby="resolvedTabId"

app/pages/compare.vue

@@ -455,7 +455,6 @@ useSeoMeta({
                   v-if="packages.length"
                   :packages-data="packagesData"
                   :packages="packages.filter(p => p !== NO_DEPENDENCY_ID)"
-                  :is-active-tab="comparisonView === 'charts'"
                 />
               </div>
             </TabPanel>

test/nuxt/a11y.spec.ts

@@ -1021,7 +1021,6 @@ describe('component accessibility audits', () => {
       it('should have no accessibility violations', async () => {
         const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
-            isActiveTab: true,
             packagesData: [
               {
                 package: {
@@ -1118,7 +1117,6 @@ describe('component accessibility audits', () => {
       it('should have no accessibility violations with empty data', async () => {
         const wrapper = await mountSuspended(FacetScatterChart, {
           props: {
-            isActiveTab: true,
             packagesData: [],
             packages: [],
           },