From 38b4683485b21fb91e6ef17f7343497f67963edb Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 25 Apr 2024 00:54:39 +0100
Subject: [PATCH] Refactor

---
 doc/tabs/AccessibilityDoc.vue |  6 ++---
 doc/tabs/TemplateDoc.vue      | 48 +++++++++++++++--------------------
 2 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/doc/tabs/AccessibilityDoc.vue b/doc/tabs/AccessibilityDoc.vue
index f21c70e91..a6e8cee4b 100644
--- a/doc/tabs/AccessibilityDoc.vue
+++ b/doc/tabs/AccessibilityDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header has a
-            <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
-            <i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
+            The tabs container in TabList is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Tabs. Each Tab has a
+            <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding TabPanel. TabPanel has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of Tab and
+            <i>aria-labelledby</i> reference to Tab as the accessible name.
         </p>
 
         <h3>Tab Keyboard Support</h3>
diff --git a/doc/tabs/TemplateDoc.vue b/doc/tabs/TemplateDoc.vue
index 13b5cdb61..9de1da241 100644
--- a/doc/tabs/TemplateDoc.vue
+++ b/doc/tabs/TemplateDoc.vue
@@ -9,14 +9,12 @@
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </Tab>
-                <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
-                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
-                    </div>
+                <Tab value="1" as="div" class="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                    <span class="font-bold white-space-nowrap">Onyama Limba</span>
                 </Tab>
-                <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
-                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                <Tab v-slot="slotProps" value="2" asChild>
+                    <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
                         <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
                         <Badge value="2" />
@@ -58,14 +56,12 @@ export default {
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold white-space-nowrap">Amy Elsner</span>
         </Tab>
-        <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
-            <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
-                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                <span class="font-bold white-space-nowrap">Onyama Limba</span>
-            </div>
+        <Tab value="1" as="div" class="flex align-items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <span class="font-bold white-space-nowrap">Onyama Limba</span>
         </Tab>
-        <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
-            <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+        <Tab v-slot="slotProps" value="2" asChild>
+            <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                 <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
                 <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
                 <Badge value="2" />
@@ -101,14 +97,12 @@ export default {
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </Tab>
-                <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
-                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
-                    </div>
+                <Tab value="1" as="div" class="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                    <span class="font-bold white-space-nowrap">Onyama Limba</span>
                 </Tab>
-                <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
-                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                <Tab v-slot="slotProps" value="2" asChild>
+                    <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
                         <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
                         <Badge value="2" />
@@ -149,14 +143,12 @@ export default {
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </Tab>
-                <Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
-                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
-                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
-                        <span class="font-bold white-space-nowrap">Onyama Limba</span>
-                    </div>
+                <Tab value="1" as="div" class="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+                    <span class="font-bold white-space-nowrap">Onyama Limba</span>
                 </Tab>
-                <Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
-                    <div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
+                <Tab v-slot="slotProps" value="2" asChild>
+                    <div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                         <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
                         <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
                         <Badge value="2" />