diff --git a/packages/docs/components/Tabs.md b/packages/docs/components/Tabs.md
index e8d4727dc..aa4638344 100644
--- a/packages/docs/components/Tabs.md
+++ b/packages/docs/components/Tabs.md
@@ -78,21 +78,20 @@ sidebarDepth: 2
### Props
-| Prop name | Description | Type | Values | Default |
-| --------- | --------------------------------------------------------------------------------- | ---------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaRole | Role attribute to be passed to the div wrapper for better accessibility | string | - | From config:
tabs: {
ariaRole: "tabpanel"
} |
-| component | Component to be injected. | Component | - | |
-| content | Text content, unnecessary when default slot is used | string | - | |
-| disabled | Item will be disabled | boolean | - | false |
-| events | Events to be binded to the injected component | {} | - | |
-| icon | Icon on the left | string | - | From config:
tabs: {
icon: undefined
} |
-| iconPack | Icon pack | string | - | From config:
tabs: {
iconPack: undefined
} |
-| label | Item label | string | - | |
-| override | Override existing theme classes completely | boolean | - | |
-| props | Props to be binded to the injected component | any | - | |
-| tag | Tabs item tag name | DynamicComponent | - | From config:
tabs: {
itemTag: "button"
} |
-| value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | |
-| visible | Show/hide item | boolean | - | true |
+| Prop name | Description | Type | Values | Default |
+| --------- | --------------------------------------------------------------------------------- | ---------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| component | Component to be injected. | Component | - | |
+| content | Text content, unnecessary when default slot is used | string | - | |
+| disabled | Item will be disabled | boolean | - | false |
+| events | Events to be binded to the injected component | {} | - | |
+| icon | Icon on the left | string | - | From config:
tabs: {
icon: undefined
} |
+| iconPack | Icon pack | string | - | From config:
tabs: {
iconPack: undefined
} |
+| label | Item label | string | - | |
+| override | Override existing theme classes completely | boolean | - | |
+| props | Props to be binded to the injected component | any | - | |
+| tag | Tabs item tag name | DynamicComponent | - | From config:
tabs: {
itemTag: "button"
} |
+| value | Item value (it will be used as v-model of wrapper component) - default is an uuid | string\|number\|object | - | |
+| visible | Show/hide item | boolean | - | true |
### Events
diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
index 923156357..1954098e3 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>(), {
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}`"
- :class="panelClasses"
- :data-id="`tabs-${item.identifier}`"
data-oruga="tabs-item"
+ :data-id="`tabs-${item.identifier}`"
+ :class="panelClasses"
+ role="tabpanel"
+ :hidden="!isActive"
:aria-labelledby="`tab-${item.identifier}`"
aria-roledescription="item">
-