From fe191a85c9be8f702482ff62d1cce9250ad81bc0 Mon Sep 17 00:00:00 2001
From: mlmoravek <marcel.moravek@yahoo.de>
Date: Mon, 18 Nov 2024 14:37:39 +0100
Subject: [PATCH] fix(tabs): set fixed `role` values `tab` and `tabpanel`

---
 packages/oruga/src/components/tabs/TabItem.vue | 5 +++--
 packages/oruga/src/components/tabs/Tabs.vue    | 2 +-
 packages/oruga/src/components/tabs/props.ts    | 2 --
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
index 923156357..fdc33fb71 100644
--- a/packages/oruga/src/components/tabs/TabItem.vue
+++ b/packages/oruga/src/components/tabs/TabItem.vue
@@ -26,7 +26,6 @@ const props = withDefaults(defineProps<TabItemProps<T, C>>(), {
     icon: () => getDefault("tabs.icon"),
     iconPack: () => getDefault("tabs.iconPack"),
     tag: () => getDefault("tabs.itemTag", "button"),
-    ariaRole: () => getDefault("tabs.ariaRole", "tabpanel"),
     content: undefined,
     component: undefined,
     props: undefined,
@@ -164,9 +163,11 @@ const panelClasses = defineClasses(["tabPanelClass", "o-tabs__panel"]);
                 v-show="isActive && visible"
                 v-bind="$attrs"
                 :id="`tabpanel-${item.identifier}`"
+                data-oruga="tabs-item"
                 :class="panelClasses"
+                role="tabpanel"
                 :data-id="`tabs-${item.identifier}`"
-                data-oruga="tabs-item"
+                :hidden="!isActive"
                 :aria-labelledby="`tab-${item.identifier}`"
                 aria-roledescription="item">
                 <!-- 
diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
index 77a0a9836..af2c3c463 100644
--- a/packages/oruga/src/components/tabs/Tabs.vue
+++ b/packages/oruga/src/components/tabs/Tabs.vue
@@ -279,7 +279,7 @@ const contentClasses = defineClasses(
                 :id="`tab-${childItem.identifier}`"
                 :key="childItem.identifier"
                 :class="childItem.navClasses"
-                :role="childItem.ariaRole"
+                role="tab"
                 :aria-controls="`tabpanel-${childItem.identifier}`"
                 :aria-selected="childItem.value === activeItem.value">
                 <o-slot-component
diff --git a/packages/oruga/src/components/tabs/props.ts b/packages/oruga/src/components/tabs/props.ts
index 395f55ec3..e1b079ba1 100644
--- a/packages/oruga/src/components/tabs/props.ts
+++ b/packages/oruga/src/components/tabs/props.ts
@@ -102,8 +102,6 @@ export type TabItemProps<T, C extends Component> = {
     iconPack?: string;
     /** Tabs item tag name */
     tag?: DynamicComponent;
-    /** Role attribute to be passed to the div wrapper for better accessibility */
-    ariaRole?: string;
     /** Text content, unnecessary when default slot is used */
     content?: string;
     /** Component to be injected. */