diff --git a/packages/docs/components/Steps.md b/packages/docs/components/Steps.md
index f931ea813..1f9d058bc 100644
--- a/packages/docs/components/Steps.md
+++ b/packages/docs/components/Steps.md
@@ -41,9 +41,11 @@ Breaking things down into multiple steps can improve the user experience by keep
 
 | Prop name         | Description                                                                                                                   | Type                                                 | Values                                                                          | Default                                                                                                                                                                                             |
 | ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| activateOnFocus   | Set the step active on navigation focus                                                                                       | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                                                                         |
 | animateInitially  | Apply animation on the initial render                                                                                         | boolean                                              | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;animateInitially: false<br>}</code>                                             |
 | animated          | Step navigation is animated                                                                                                   | boolean                                              | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;animated: true<br>}</code>                                                      |
 | animation         | Transition animation name                                                                                                     | [string, string, string, string] \| [string, string] | `[next`, `prev]`, `[right`, `left`, `down`, `up]`                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;animation: [ "slide-next", "slide-prev", "slide-down", "slide-up",]<br>}</code> |
+| ariaLabel         | Accessibility aria-label to be passed to the tablist wrapper element                                                          | string                                               | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;ariaLabel: undefined<br>}</code>                                                |
 | ariaNextLabel     | Accessibility next button aria label                                                                                          | string                                               | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;ariaNextLabel: "Next"<br>}</code>                                               |
 | ariaPreviousLabel | Accessibility previous button aria label                                                                                      | string                                               | -                                                                               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;ariaPreviousLabel: "Previous"<br>}</code>                                       |
 | hasNavigation     | Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items. | boolean                                              | -                                                                               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                                                                          |
@@ -91,7 +93,6 @@ Breaking things down into multiple steps can improve the user experience by keep
 
 | Prop name | Description                                                                                                                        | Type                   | Values | Default                                                                                                                                             |
 | --------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ariaRole  | Role attribute to be passed to the li wrapper for better accessibility                                                             | string                 | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;ariaRole: "tab"<br>}</code>     |
 | clickable | Item can be used directly to navigate.<br/>If undefined, previous steps are clickable while the others are not                     | boolean                | -      |                                                                                                                                                     |
 | component | Component to be injected.                                                                                                          | Component              | -      |                                                                                                                                                     |
 | content   | Text content, unnecessary when default slot is used                                                                                | string                 | -      |                                                                                                                                                     |
@@ -103,7 +104,6 @@ Breaking things down into multiple steps can improve the user experience by keep
 | override  | Override existing theme classes completely                                                                                         | boolean                | -      |                                                                                                                                                     |
 | props     | Props to be binded to the injected component                                                                                       | any                    | -      |                                                                                                                                                     |
 | step      | Step marker content (when there is no icon)                                                                                        | number \| string       | -      |                                                                                                                                                     |
-| tag       | Step item tag name                                                                                                                 | DynamicComponent       | -      | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>steps: {<br>&nbsp;&nbsp;itemTag: "button"<br>}</code>   |
 | value     | Item value (it will be used as v-model of wrapper component) - default is an uuid                                                  | string\|number\|object | -      |                                                                                                                                                     |
 | variant   | Default style for the step.<br/>This will override parent type.<br/>Could be used to set a completed step to "success" for example | string                 | -      |                                                                                                                                                     |
 | visible   | Show/hide item                                                                                                                     | boolean                | -      | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                          |
diff --git a/packages/oruga/src/components/steps/StepItem.vue b/packages/oruga/src/components/steps/StepItem.vue
index 1e1de36d4..730850f2c 100644
--- a/packages/oruga/src/components/steps/StepItem.vue
+++ b/packages/oruga/src/components/steps/StepItem.vue
@@ -29,8 +29,6 @@ const props = withDefaults(defineProps<StepItemProps<T, C>>(), {
     visible: true,
     icon: () => getDefault("steps.icon"),
     iconPack: () => getDefault("steps.iconPack"),
-    tag: () => getDefault("steps.itemTag", "button"),
-    ariaRole: () => getDefault("steps.ariaRole", "tab"),
     content: undefined,
     component: undefined,
     props: undefined,
@@ -48,15 +46,14 @@ const itemValue = props.value ?? useId();
 
 const slots = useSlots();
 
-// provided data is a computed ref to enjure reactivity
+// provided data is a computed ref to ensure reactivity
 const providedData = computed<StepItemComponent<T>>(() => ({
     ...props,
     value: itemValue,
     $slots: slots,
-    navClasses: navItemClasses.value,
     stepClasses: stepClasses.value,
-    labelClasses: stepLabelClasses.value,
     iconClasses: stepIconClasses.value,
+    labelClasses: stepLabelClasses.value,
     isTransitioning: isTransitioning.value,
     activate,
     deactivate,
@@ -118,45 +115,40 @@ function beforeLeave(): void {
 
 // --- Computed Component Classes ---
 
-const navItemClasses = defineClasses(
-    ["navItemClass", "o-steps__nav-item"],
+const stepClasses = defineClasses(
+    ["stepClass", "o-steps__step"],
     [
-        "navItemVariantClass",
-        "o-steps__nav-item--",
+        "stepVariantClass",
+        "o-steps__step--",
         computed(() => parent.value?.variant || props.variant),
         computed(() => !!parent.value?.variant || !!props.variant),
     ],
-    ["navItemActiveClass", "o-steps__nav-item--active", null, isActive],
+    ["stepActiveClass", "o-steps__step--active", null, isActive],
+    ["stepClickableClass", "o-steps__step--clickable", null, isClickable],
+    [
+        "stepDisabledClass",
+        "o-steps__step--disabled",
+        null,
+        computed(() => props.disabled),
+    ],
     [
-        "navItemPreviousClass",
-        "o-steps__nav-item--previous",
+        "stepPreviousClass",
+        "o-steps__step--previous",
         null,
         computed(() => item.value.index < parent.value?.activeIndex),
     ],
     [
-        "navItemNextClass",
-        "o-steps__nav-item--next",
+        "stepNextClass",
+        "o-steps__step--next",
         null,
         computed(() => item.value.index > parent.value?.activeIndex),
     ],
-);
-
-const stepClasses = defineClasses(
-    ["stepClass", "o-steps__step"],
     [
         "stepLabelPositionClass",
-        "o-steps__step-label-",
+        "o-steps__step--label-",
         computed(() => parent.value?.labelPosition),
         computed(() => !!parent.value?.labelPosition),
     ],
-    ["stepActiveClass", "o-steps__step--active", null, isActive],
-    ["stepClickableClass", "o-steps__step--clickable", null, isClickable],
-    [
-        "stepDisabledClass",
-        "o-steps__step--disabled",
-        null,
-        computed(() => props.disabled),
-    ],
 );
 
 const stepLabelClasses = defineClasses([
@@ -184,6 +176,8 @@ const panelClasses = defineClasses(["stepPanelClass", "o-steps__panel"]);
             data-oruga="steps-item"
             :data-id="`steps-${item.identifier}`"
             :class="panelClasses"
+            role="tabpanel"
+            :hidden="!isActive"
             :aria-labelledby="`tab-${item.identifier}`"
             aria-roledescription="item">
             <!-- 
diff --git a/packages/oruga/src/components/steps/Steps.vue b/packages/oruga/src/components/steps/Steps.vue
index f3001ad71..137e536f4 100644
--- a/packages/oruga/src/components/steps/Steps.vue
+++ b/packages/oruga/src/components/steps/Steps.vue
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<StepsProps<T>>(), {
     iconPrev: () => getDefault("steps.iconPrev", "chevron-left"),
     iconNext: () => getDefault("steps.iconNext", "chevron-right"),
     hasNavigation: true,
-    destroyOnHide: false,
+    activateOnFocus: false,
     animated: () => getDefault("steps.animated", true),
     animation: () =>
         getDefault("steps.animation", [
@@ -65,6 +65,7 @@ const props = withDefaults(defineProps<StepsProps<T>>(), {
     labelPosition: () => getDefault("steps.labelPosition", "bottom"),
     rounded: true,
     mobileBreakpoint: () => getDefault("steps.mobileBreakpoint"),
+    ariaLabel: () => getDefault("steps.ariaLabel"),
     ariaNextLabel: () => getDefault("steps.ariaNextLabel", "Next"),
     ariaPreviousLabel: () => getDefault("steps.ariaPreviousLabel", "Previous"),
 });
@@ -87,10 +88,7 @@ const { isMobile } = useMatchMedia(props.mobileBreakpoint);
 
 const rootRef = useTemplateRef("rootElement");
 
-/** The selected item value, use v-model to make it two-way binding */
-const vmodel = defineModel<ModelValue>({ default: undefined });
-
-// provided data is a computed ref to enjure reactivity
+// provided data is a computed ref to ensure reactivity
 const provideData = computed<StepsComponent>(() => ({
     activeIndex: activeItem.value?.index ?? 0,
     labelPosition: props.labelPosition,
@@ -124,11 +122,14 @@ const groupedOptions = computed(() =>
     normalizeOptions<T>(props.options, nextSequence),
 );
 
+/** The selected item value, use v-model to make it two-way binding */
+const vmodel = defineModel<ModelValue>({ default: undefined });
+
 /** When v-model is changed set the new active step. */
 watch(
     () => props.modelValue,
     (value) => {
-        if (vmodel.value !== value) performAction(value as T);
+        if (vmodel.value !== value) performAction(value);
     },
 );
 
@@ -147,71 +148,105 @@ const isTransitioning = computed(() =>
     items.value.some((item) => item.isTransitioning),
 );
 
-/** Check if previous button is available. */
-const hasPrev = computed(() => !!prevItem.value);
+// --- EVENT HANDLER ---
 
-/** Check if next button is available. */
-const hasNext = computed(() => !!nextItem.value);
-
-/** Retrieves the previous visible item */
-const prevItem = computed(() => {
-    if (!activeItem.value) return undefined;
-
-    let prevItem: StepItem<T> | undefined;
-    let idx =
-        items.value.findIndex(
-            (item) => item.identifier === activeItem.value?.identifier,
-        ) - 1;
-    for (; idx >= 0; idx--) {
-        if (items.value[idx].visible) {
-            prevItem = items.value[idx];
-            break;
-        }
-    }
-    return prevItem;
-});
-
-/** Retrieves the next visible item */
-const nextItem = computed(() => {
-    let nextItem: StepItem<T> | undefined;
-    let idx = activeItem.value
-        ? items.value.findIndex(
-              (item) => item.identifier === activeItem.value?.identifier,
-          ) + 1
-        : 0;
-    for (; idx < items.value.length; idx++) {
-        if (items.value[idx].visible) {
-            nextItem = items.value[idx];
-            break;
-        }
-    }
-    return nextItem;
-});
+/** Click the item after or before the current active item. */
+function activateItem(fowardIndex: 1 | -1): void {
+    const index = (activeItem.value?.index ?? 0) + fowardIndex;
+    if (index < 0 || index >= items.value.length) return;
+    const item = items.value[index];
+    itemClick(item);
+}
 
+/** Item click listener, emit input event and change active child. */
+function itemClick(item: StepItem<T>): void {
+    if (!isItemClickable(item)) return;
+    if (vmodel.value !== item.value) performAction(item.value);
+}
 /** Return if the step should be clickable or not. */
 function isItemClickable(item: StepItem<T>): boolean {
-    if (item.clickable === undefined)
+    if (typeof item.clickable === "undefined")
         return item.index < (activeItem.value?.index ?? 0);
     return item.clickable;
 }
 
-/** Previous button click listener. */
-function prev(): void {
-    if (hasPrev.value && prevItem.value) itemClick(prevItem.value);
+/** Check if previous button is available. */
+const hasPrev = computed(() =>
+    isDefined(getFirstViableIndex((activeItem.value?.index ?? 0) - 1, false)),
+);
+
+/** Check if next button is available. */
+const hasNext = computed(() =>
+    isDefined(getFirstViableIndex((activeItem.value?.index ?? 0) + 1, true)),
+);
+
+/** Focus the next item if possible. */
+function onNext(index: number): void {
+    const viableIndex = getFirstViableIndex(index + 1, true);
+    if (isDefined(viableIndex)) moveFocus(viableIndex);
 }
 
-/** Previous button click listener. */
-function next(): void {
-    if (hasNext.value && nextItem.value) itemClick(nextItem.value);
+/** Focus the previous item if possible. */
+function onPrev(index: number): void {
+    const viableIndex = getFirstViableIndex(index - 1, false);
+    if (isDefined(viableIndex)) moveFocus(viableIndex);
 }
 
-/** Item click listener, emit input event and change active child. */
-function itemClick(item: StepItem<T>): void {
-    if (vmodel.value !== item.value) performAction(item.value as T);
+/** Focus the first viable item. */
+function onHomePressed(): void {
+    const viableIndex = getFirstViableIndex(0, true);
+    if (isDefined(viableIndex)) moveFocus(viableIndex);
+}
+
+/** Focus the last viable item. */
+function onEndPressed(): void {
+    const viableIndex = getFirstViableIndex(items.value.length - 1, false);
+    if (isDefined(viableIndex)) moveFocus(viableIndex);
+}
+
+/** Set focus on a step item or click it if `activateOnFocus`. */
+function moveFocus(index: number): void {
+    if (index < 0 || index >= items.value.length) return;
+    const item = items.value[index];
+
+    if (props.activateOnFocus) {
+        itemClick(item);
+    } else {
+        const el = rootRef.value?.querySelector<HTMLElement>(
+            `#tab-${item.identifier}`,
+        );
+        el?.focus();
+    }
+}
+
+/**
+ * Get the first 'viable' child, starting at startingIndex and in the direction specified
+ * by the boolean parameter forward. In other words, first try to select the child at index
+ * startingIndex, and if it is not visible or it is disabled, then go to the index in the
+ * specified direction until either returning to startIndex or finding a viable child item.
+ */
+function getFirstViableIndex(
+    startingIndex: number,
+    forward: boolean,
+): number | undefined {
+    const direction = forward ? 1 : -1;
+    let newIndex = startingIndex;
+    for (
+        ;
+        newIndex > 0 && newIndex < items.value.length;
+        newIndex += direction
+    ) {
+        const item = items.value[newIndex];
+        // Break if the item at this index is viable (not disabled and is visible)
+        if (item.visible && !item.disabled && isItemClickable(item)) break;
+    }
+
+    if (newIndex < 0 || newIndex >= items.value.length) return undefined;
+    return newIndex;
 }
 
 /** Activate next child and deactivate prev child */
-function performAction(newValue: T): void {
+function performAction(newValue: ModelValue): void {
     const oldValue = activeItem.value?.value;
     const oldItem = activeItem.value;
     const newItem =
@@ -224,7 +259,7 @@ function performAction(newValue: T): void {
 
     nextTick(() => {
         vmodel.value = newValue;
-        emits("change", newValue, oldValue as T);
+        emits("change", newValue, oldValue);
     });
 }
 
@@ -259,11 +294,11 @@ const rootClasses = defineClasses(
     ["mobileClass", "o-steps--mobile", null, isMobile],
 );
 
-const navClasses = defineClasses(
-    ["navClass", "o-steps__nav"],
+const tablistClasses = defineClasses(
+    ["listClass", "o-steps__list"],
     [
         "animatedClass",
-        "o-steps__nav--animated",
+        "o-steps__list--animated",
         null,
         computed(() => props.animated),
     ],
@@ -300,52 +335,47 @@ const navigationClasses = defineClasses([
 <template>
     <div ref="rootElement" :class="rootClasses" data-oruga="steps">
         <ol
-            :class="navClasses"
+            :class="tablistClasses"
             role="tablist"
+            :aria-label="ariaLabel"
             :aria-orientation="vertical ? 'vertical' : 'horizontal'">
             <li
                 v-for="(childItem, index) in items"
                 v-show="childItem.visible"
                 :id="`tab-${childItem.identifier}`"
                 :key="childItem.identifier"
-                :class="childItem.navClasses"
-                :role="childItem.ariaRole"
+                :class="childItem.stepClasses"
+                role="tab"
+                :tabindex="childItem.value === activeItem?.value ? 0 : -1"
                 :aria-current="
                     childItem.value === activeItem?.value ? 'step' : undefined
                 "
                 :aria-controls="`tabpanel-${childItem.identifier}`"
-                :aria-selected="childItem.value === activeItem?.value">
+                :aria-selected="childItem.value === activeItem?.value"
+                @click="itemClick(childItem)"
+                @keydown.enter.prevent="itemClick(childItem)"
+                @keydown.space.prevent="itemClick(childItem)"
+                @keydown.left.prevent="onPrev(childItem.index)"
+                @keydown.right.prevent="onNext(childItem.index)"
+                @keydown.home.prevent="onHomePressed"
+                @keydown.end.prevent="onEndPressed">
                 <span v-if="index > 0" :class="dividerClasses" />
 
-                <component
-                    :is="childItem.tag"
-                    role="button"
-                    :tabindex="isItemClickable(childItem) ? 0 : null"
-                    :class="childItem.stepClasses"
-                    @click="isItemClickable(childItem) && itemClick(childItem)"
-                    @keydown.enter="
-                        isItemClickable(childItem) && itemClick(childItem)
-                    "
-                    @keydown.left.prevent="prev"
-                    @keydown.right.prevent="next"
-                    @keydown.up.prevent="prev"
-                    @keydown.down.prevent="next">
-                    <div :class="markerClasses">
-                        <o-icon
-                            v-if="childItem.icon"
-                            :class="childItem.iconClasses"
-                            :icon="childItem.icon"
-                            :pack="childItem.iconPack"
-                            :size="size" />
-                        <span v-else-if="childItem.step">
-                            {{ childItem.step }}
-                        </span>
-                    </div>
-
-                    <div :class="childItem.labelClasses">
-                        {{ childItem.label }}
-                    </div>
-                </component>
+                <div :class="markerClasses">
+                    <o-icon
+                        v-if="childItem.icon"
+                        :class="childItem.iconClasses"
+                        :icon="childItem.icon"
+                        :pack="childItem.iconPack"
+                        :size="size" />
+                    <span v-else-if="childItem.step">
+                        {{ childItem.step }}
+                    </span>
+                </div>
+
+                <div :class="childItem.labelClasses">
+                    {{ childItem.label }}
+                </div>
             </li>
         </ol>
 
@@ -371,8 +401,8 @@ const navigationClasses = defineClasses([
         -->
         <slot
             name="navigation"
-            :previous="{ disabled: !hasPrev, action: prev }"
-            :next="{ disabled: !hasNext, action: next }">
+            :previous="{ disabled: !hasPrev, action: () => activateItem(-1) }"
+            :next="{ disabled: !hasNext, action: () => activateItem(1) }">
             <nav v-if="hasNavigation" :class="navigationClasses">
                 <o-button
                     role="button"
@@ -381,7 +411,7 @@ const navigationClasses = defineClasses([
                     icon-both
                     :disabled="!hasPrev"
                     :aria-label="ariaPreviousLabel"
-                    @click.prevent="prev" />
+                    @click.prevent="activateItem(-1)" />
 
                 <o-button
                     role="button"
@@ -390,7 +420,7 @@ const navigationClasses = defineClasses([
                     icon-both
                     :disabled="!hasNext"
                     :aria-label="ariaNextLabel"
-                    @click.prevent="next" />
+                    @click.prevent="activateItem(1)" />
             </nav>
         </slot>
     </div>
diff --git a/packages/oruga/src/components/steps/examples/base.vue b/packages/oruga/src/components/steps/examples/base.vue
index d6f68a710..c2a53452a 100644
--- a/packages/oruga/src/components/steps/examples/base.vue
+++ b/packages/oruga/src/components/steps/examples/base.vue
@@ -19,11 +19,9 @@ const nextIcon = ref("chevron-right");
 const showSocial = ref(false);
 const labelPosition = ref<"bottom" | "left" | "right">("bottom");
 
-const onProfileActivate = () => {
-    if (enableProfileActivateEvent.value) {
-        alert("Profile Activated");
-    }
-};
+function onProfileActivate(): void {
+    if (enableProfileActivateEvent.value) alert("Profile Activated");
+}
 </script>
 
 <template>
diff --git a/packages/oruga/src/components/steps/examples/inspector.vue b/packages/oruga/src/components/steps/examples/inspector.vue
index 206a83929..58bd7530a 100644
--- a/packages/oruga/src/components/steps/examples/inspector.vue
+++ b/packages/oruga/src/components/steps/examples/inspector.vue
@@ -82,40 +82,34 @@ const inspectData = [
         warning: "Click on a marker to see it in action",
     },
     {
-        class: "navClass",
-        description: "Class of the steps nav container",
+        class: "listClass",
+        description: "Class of the steps list container",
     },
     {
-        class: "navItemClass",
-        description: "Class of the nav item",
-        specificity: "when <b>positionClass</b> is applied",
-        subitem: true,
-    },
-    {
-        class: "navItemActiveClass",
-        description: "Class of the nav item when active",
+        class: "stepClass",
+        description: "Class of the content item",
         subitem: true,
     },
     {
-        class: "navItemPreviousClass",
-        description: "Class of the nav item before the active one",
+        class: "stepPreviousClass",
+        description: "Class of the step item before the active one",
         subitem: true,
         action: (): void => {
             activeStep.value = 2;
         },
     },
     {
-        class: "navItemNextClass",
-        description: "CClass of the nav item after the active one",
+        class: "stepNextClass",
+        description: "CClass of the step item after the active one",
         subitem: true,
         action: (): void => {
             activeStep.value = 2;
         },
     },
     {
-        class: "navItemVariantClass",
+        class: "stepVariantClass",
         description:
-            "Class of the nav item with variant (default value by parent steps component)",
+            "Class of the step item with variant (default value by parent steps component)",
         subitem: true,
         properties: ["variant"],
         suffixes: ["primary", "info", "warning", "danger"],
@@ -123,11 +117,6 @@ const inspectData = [
             data.variant = "warning";
         },
     },
-    {
-        class: "stepClass",
-        description: "Class of the content item",
-        subitem: true,
-    },
     {
         class: "stepActiveClass",
         description: "Class of the tab item when active",
diff --git a/packages/oruga/src/components/steps/props.ts b/packages/oruga/src/components/steps/props.ts
index 0bd25c8f8..5a1c1a74f 100644
--- a/packages/oruga/src/components/steps/props.ts
+++ b/packages/oruga/src/components/steps/props.ts
@@ -1,10 +1,5 @@
 import type { Component } from "vue";
-import type {
-    ComponentClass,
-    ComponentEmits,
-    DynamicComponent,
-    OptionsProp,
-} from "@/types";
+import type { ComponentClass, ComponentEmits, OptionsProp } from "@/types";
 import type { ComponentProps } from "vue-component-type-helpers";
 
 export type StepsProps<T> = {
@@ -47,6 +42,8 @@ export type StepsProps<T> = {
      * Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.
      */
     hasNavigation?: boolean;
+    /** Set the step active on navigation focus */
+    activateOnFocus?: boolean;
     /** Step navigation is animated */
     animated?: boolean;
     /**
@@ -65,6 +62,8 @@ export type StepsProps<T> = {
     rounded?: boolean;
     /** Mobile breakpoint as `max-width` value */
     mobileBreakpoint?: string;
+    /** Accessibility aria-label to be passed to the tablist wrapper element */
+    ariaLabel?: string;
     /** Accessibility next button aria label */
     ariaNextLabel?: string;
     /** Accessibility previous button aria label  */
@@ -85,8 +84,8 @@ type StepsClasses = Partial<{
     positionClass: ComponentClass;
     /** Class of steps component when on mobile */
     mobileClass: ComponentClass;
-    /** Class of the steps nav container */
-    navClass: ComponentClass;
+    /** Class of the steps list container */
+    listClass: ComponentClass;
     /** Class of Steps component when animation gets triggered */
     animatedClass: ComponentClass;
     /** Class of the Steps component dividers */
@@ -134,10 +133,6 @@ export type StepItemProps<T, C extends Component> = {
     icon?: string;
     /** Icon pack */
     iconPack?: string;
-    /** Step item tag name */
-    tag?: DynamicComponent;
-    /** Role attribute to be passed to the li wrapper for better accessibility */
-    ariaRole?: string;
     /** Text content, unnecessary when default slot is used */
     content?: string;
     /** Component to be injected. */
@@ -150,19 +145,15 @@ export type StepItemProps<T, C extends Component> = {
 
 // class props (will not be displayed in the docs)
 type StepItemClasses = Partial<{
-    /** Class of the nav item */
-    navItemClass: ComponentClass;
-    /** Class of the nav item when active */
-    navItemActiveClass: ComponentClass;
-    /** Class of the nav item before the active one */
-    navItemPreviousClass: ComponentClass;
-    /** Class of the nav item after the active one */
-    navItemNextClass: ComponentClass;
-    /** Class of the nav item with variant (default value by parent steps component) */
-    navItemVariantClass: ComponentClass;
     /** Class of the step item */
     stepClass: ComponentClass;
-    /** Class of the tab item when active */
+    /** Class of the step item with variant (default value by parent steps component) */
+    stepVariantClass: ComponentClass;
+    /** Class of the step item before the active one */
+    stepPreviousClass: ComponentClass;
+    /** Class of the step item after the active one */
+    stepNextClass: ComponentClass;
+    /** Class of the step item when active */
     stepActiveClass: ComponentClass;
     /** Class of the step item when clickable */
     stepClickableClass: ComponentClass;
diff --git a/packages/oruga/src/components/steps/tests/__snapshots__/steps.test.ts.snap b/packages/oruga/src/components/steps/tests/__snapshots__/steps.test.ts.snap
index 95086d355..7275de9a8 100644
--- a/packages/oruga/src/components/steps/tests/__snapshots__/steps.test.ts.snap
+++ b/packages/oruga/src/components/steps/tests/__snapshots__/steps.test.ts.snap
@@ -1,8 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`OSteps tests > integration tests > test render correctly 1`] = `
+"<div class="o-steps" data-oruga="steps">
+  <ol class="o-steps__list o-steps__list--animated" role="tablist" aria-orientation="horizontal"></ol>
+  <section class="o-steps__content">
+    <!--
+                @slot Place step items here
+            -->
+    <transition-stub appear="false" persisted="true" css="true">
+      <div id="tabpanel-1" data-oruga="steps-item" data-id="steps-1" class="o-steps__panel" role="tabpanel" aria-labelledby="tab-1" aria-roledescription="item">
+        <!-- 
+                @slot Step item content
+                @binding {boolean} active - if item is shown 
+            -->
+        <!-- injected component -->
+        <!-- default content prop -->ABC
+      </div>
+    </transition-stub>
+  </section>
+  <!--
+            @slot Override step navigation
+            @binding {{disabled: boolean, action: (): void }} previous - previous button configs
+            @binding {{disabled: boolean, action: (): void }} next - next button configs
+        -->
+  <nav class="o-steps__navigation"><button data-oruga="button" type="button" role="button" tabindex="0" class="o-btn o-btn--disabled" disabled="" aria-label="Previous"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-left mdi-24px"></i></span>
+      <!--v-if-->
+      <!--v-if--></span>
+    </button><button data-oruga="button" type="button" role="button" tabindex="0" class="o-btn o-btn--disabled" disabled="" aria-label="Next"><span class="o-btn__wrapper"><span class="o-icon o-btn__icon o-btn__icon-left" data-oruga="icon"><!-- custom icon component --><!-- native css icon --><i class="mdi mdi-chevron-right mdi-24px"></i></span>
+      <!--v-if-->
+      <!--v-if--></span>
+    </button></nav>
+</div>"
+`;
+
 exports[`OSteps tests > render correctly 1`] = `
 "<div class="o-steps" data-oruga="steps">
-  <ol class="o-steps__nav o-steps__nav--animated" role="tablist" aria-orientation="horizontal"></ol>
+  <ol class="o-steps__list o-steps__list--animated" role="tablist" aria-orientation="horizontal"></ol>
   <section class="o-steps__content">
     <!--
                 @slot Place step items here
diff --git a/packages/oruga/src/components/steps/tests/steps.axe.test.ts b/packages/oruga/src/components/steps/tests/steps.axe.test.ts
index 8d59e784b..e57e4bc2c 100644
--- a/packages/oruga/src/components/steps/tests/steps.axe.test.ts
+++ b/packages/oruga/src/components/steps/tests/steps.axe.test.ts
@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from "vitest";
 import { enableAutoUnmount, mount } from "@vue/test-utils";
 import { axe } from "jest-axe";
+import { nextTick } from "vue";
 
 import StepsExample from "./StepsExample.vue";
 
@@ -55,6 +56,8 @@ describe("OSteps axe tests", () => {
             props: { ...props },
             attachTo: document.body,
         });
+        await nextTick();
+
         expect(await axe(wrapper.element)).toHaveNoViolations();
     });
 });
diff --git a/packages/oruga/src/components/steps/tests/steps.integration.test.ts b/packages/oruga/src/components/steps/tests/steps.integration.test.ts
deleted file mode 100644
index 61cb9b1bc..000000000
--- a/packages/oruga/src/components/steps/tests/steps.integration.test.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import { describe, test, expect, afterEach } from "vitest";
-import { enableAutoUnmount, mount } from "@vue/test-utils";
-import { shallowRef, nextTick } from "vue";
-
-import type { OptionsProp } from "@/composables";
-
-import OSteps from "@/components/steps/Steps.vue";
-import OStepItem from "@/components/steps/StepItem.vue";
-import OButton from "@/components/button/Button.vue";
-
-describe("OSteps with OStepItem tests", () => {
-    enableAutoUnmount(afterEach);
-
-    function createTestcomponent(stepProps, itemProps) {
-        return {
-            components: {
-                OSteps,
-                OStepItem,
-            },
-            data: () => ({ stepProps, itemProps }),
-            template: `<OSteps v-bind="stepProps">
-                    <OStepItem v-bind="itemProps" />
-                  </OSteps>
-                `,
-        };
-    }
-
-    test("test render correctly", () => {
-        const wrapper = mount(
-            createTestcomponent(
-                {},
-                {
-                    value: "1",
-                    step: "1",
-                    label: "Account",
-                    content: "ABC",
-                },
-            ),
-        );
-        expect(!!wrapper.vm).toBeTruthy();
-        expect(wrapper.exists()).toBeTruthy();
-        expect(wrapper.html()).toMatchSnapshot();
-
-        expect(wrapper.attributes("data-oruga")).toBe("steps");
-
-        const step = wrapper.find('[data-oruga="steps-item"]');
-        expect(step.exists()).toBeTruthy();
-        expect(step.text()).toBe("ABC");
-    });
-
-    test("render item with component prop correctly", () => {
-        const wrapper = mount(
-            createTestcomponent(
-                {},
-                {
-                    value: "1",
-                    step: "1",
-                    component: shallowRef(OButton),
-                    props: { label: "MyButton" },
-                },
-            ),
-        );
-
-        const step = wrapper.find('[data-oruga="steps-item"]');
-        expect(step.exists()).toBeTruthy();
-        const button = step.find('[data-oruga="button"]');
-        expect(button.text()).toBe("MyButton");
-    });
-
-    describe("handle navigation correctly", () => {
-        const options: OptionsProp<string> = [
-            { label: "Flint", value: "flint", attrs: { clickable: true } },
-            {
-                label: "Silver",
-                value: "silver",
-                attrs: { clickable: true },
-            },
-            { label: "Vane", value: "vane", attrs: { clickable: true } },
-            { label: "Billy", value: "billy", attrs: { clickable: true } },
-            { label: "Jack", value: "jack", attrs: { clickable: true } },
-        ];
-
-        test("render accordingly when item is clicked", async () => {
-            let currentIndex = 2;
-
-            const wrapper = mount(OSteps, {
-                props: { options, modelValue: options[currentIndex].value },
-            });
-            await nextTick();
-
-            const navElements = wrapper.findAll(".o-steps__nav-item");
-            expect(navElements).toHaveLength(options.length);
-
-            navElements.forEach((el, idx) => {
-                expect(el.classes("o-steps__nav-item--previous")).toBe(
-                    idx < currentIndex,
-                );
-                expect(el.classes("o-steps__nav-item--active")).toBe(
-                    idx == currentIndex,
-                );
-                expect(el.classes("o-steps__nav-item--next")).toBe(
-                    idx > currentIndex,
-                );
-            });
-
-            currentIndex = 4;
-            let navButton = navElements[currentIndex].find("button");
-            expect(navButton.exists()).toBeTruthy();
-
-            await navButton.trigger("click");
-
-            navElements.forEach((el, idx) => {
-                expect(el.classes("o-steps__nav-item--previous")).toBe(
-                    idx < currentIndex,
-                );
-                expect(el.classes("o-steps__nav-item--active")).toBe(
-                    idx == currentIndex,
-                );
-                expect(el.classes("o-steps__nav-item--next")).toBe(
-                    idx > currentIndex,
-                );
-            });
-
-            currentIndex = 0;
-            navButton = navElements[currentIndex].find("button");
-            expect(navButton.exists()).toBeTruthy();
-
-            await navButton.trigger("click");
-
-            navElements.forEach((el, idx) => {
-                expect(el.classes("o-steps__nav-item--previous")).toBe(
-                    idx < currentIndex,
-                );
-                expect(el.classes("o-steps__nav-item--active")).toBe(
-                    idx == currentIndex,
-                );
-                expect(el.classes("o-steps__nav-item--next")).toBe(
-                    idx > currentIndex,
-                );
-            });
-
-            expect(wrapper.emitted("update:modelValue")).toStrictEqual([
-                [options[4].value],
-                [options[0].value],
-            ]);
-
-            expect(wrapper.emitted("change")).toStrictEqual([
-                [options[4].value, options[2].value],
-                [options[0].value, options[4].value],
-            ]);
-        });
-
-        test("render accordingly when prev is clicked", async () => {
-            const currentIndex = 2;
-
-            const wrapper = mount(OSteps, {
-                props: { options, modelValue: options[currentIndex].value },
-            });
-            await nextTick();
-
-            const navigation = wrapper.find(".o-steps__navigation");
-            expect(navigation.exists()).toBeTruthy();
-
-            const buttons = navigation.findAll("button");
-            expect(buttons).toHaveLength(2);
-
-            // should be undefined because current index is 2
-            expect(buttons[0].attributes("disabled")).toBeUndefined();
-            expect(buttons[1].attributes("disabled")).toBeUndefined();
-
-            // trigger prev
-            await buttons[0].trigger("click");
-            // trigger prev
-            await buttons[0].trigger("click");
-
-            expect(wrapper.emitted("update:modelValue")).toStrictEqual([
-                [options[currentIndex - 1].value],
-                [options[currentIndex - 2].value],
-            ]);
-
-            expect(wrapper.emitted("change")).toStrictEqual([
-                [options[currentIndex - 1].value, options[currentIndex].value],
-                [
-                    options[currentIndex - 2].value,
-                    options[currentIndex - 1].value,
-                ],
-            ]);
-        });
-
-        test("render accordingly when next is clicked", async () => {
-            const currentIndex = 0;
-
-            const wrapper = mount(OSteps, {
-                props: { options, modelValue: options[currentIndex].value },
-            });
-            await nextTick();
-
-            const navigation = wrapper.find(".o-steps__navigation");
-            expect(navigation.exists()).toBeTruthy();
-
-            const buttons = navigation.findAll("button");
-            expect(buttons).toHaveLength(2);
-
-            // should be undefined because current index is 2
-            expect(buttons[0].attributes("disabled")).toBe("");
-            expect(buttons[1].attributes("disabled")).toBeUndefined();
-
-            // trigger prev
-            await buttons[1].trigger("click");
-            // trigger prev
-            await buttons[1].trigger("click");
-
-            expect(wrapper.emitted("update:modelValue")).toStrictEqual([
-                [options[currentIndex + 1].value],
-                [options[currentIndex + 2].value],
-            ]);
-
-            expect(wrapper.emitted("change")).toStrictEqual([
-                [options[currentIndex + 1].value, options[currentIndex].value],
-                [
-                    options[currentIndex + 2].value,
-                    options[currentIndex + 1].value,
-                ],
-            ]);
-        });
-    });
-
-    describe("handle options props correctly", () => {
-        test("handle options as primitves correctly", async () => {
-            const options: OptionsProp = ["Flint", "Silver", "Vane", 0, 1, 2];
-
-            const wrapper = mount(OSteps, { props: { options } });
-            await nextTick();
-
-            const navElements = wrapper.findAll(".o-steps__nav-item");
-            expect(navElements).toHaveLength(options.length);
-
-            const itemElements = wrapper.findAll('[data-oruga="steps-item"]');
-            expect(itemElements).toHaveLength(options.length);
-
-            navElements.forEach((el, idx) => {
-                expect(el.text()).toBe(String(options[idx]));
-            });
-        });
-
-        test("handle options as object correctly", async () => {
-            const options: OptionsProp = {
-                flint: "Flint",
-                silver: "Silver",
-                vane: "Vane",
-                0: "Zero",
-                1: "One",
-                2: "Two",
-            };
-
-            const wrapper = mount(OSteps, { props: { options } });
-            await nextTick();
-
-            const navElements = wrapper.findAll(".o-steps__nav-item");
-            expect(navElements).toHaveLength(Object.keys(options).length);
-
-            const optionElements = wrapper.findAll('[data-oruga="steps-item"]');
-            expect(optionElements).toHaveLength(Object.keys(options).length);
-
-            navElements.forEach((el, idx) => {
-                expect(el.text()).toBe(Object.entries(options)[idx][1]);
-            });
-        });
-
-        test("handle options as options array correctly", async () => {
-            const options: OptionsProp<string | number> = [
-                { label: "Flint", value: "flint", attrs: { content: "flint" } },
-                {
-                    label: "Silver",
-                    value: "silver",
-                    attrs: { clickable: true, content: "silver" },
-                },
-                { label: "Vane", value: "vane", attrs: { content: "abc" } },
-                { label: "Zero", value: 0, attrs: { content: "x" } },
-                {
-                    label: "One",
-                    value: 1,
-                    attrs: { content: "y", disabled: true },
-                },
-                {
-                    label: "Two",
-                    value: 2,
-                    attrs: { clickable: true, content: "test" },
-                },
-            ];
-
-            const wrapper = mount(OSteps, { props: { options } });
-            await nextTick();
-
-            const navElements = wrapper.findAll(".o-steps__nav-item");
-            expect(navElements).toHaveLength(Object.keys(options).length);
-
-            const optionElements = wrapper.findAll('[data-oruga="steps-item"]');
-            expect(optionElements).toHaveLength(options.length);
-
-            navElements.forEach((el, idx) => {
-                expect(el.text()).toBe(options[idx].label);
-                const button = el.find("button");
-                expect(button.exists()).toBeTruthy();
-                expect(button.classes("o-steps__step--clickable")).toBe(
-                    options[idx].attrs?.clickable || false,
-                );
-                expect(button.classes("o-steps__step--disabled")).toBe(
-                    options[idx].attrs?.disabled || false,
-                );
-            });
-
-            optionElements.forEach((el, idx) => {
-                expect(el.text()).toBe(options[idx].attrs?.content);
-            });
-        });
-    });
-});
diff --git a/packages/oruga/src/components/steps/tests/steps.test.ts b/packages/oruga/src/components/steps/tests/steps.test.ts
index 227b8d2f0..d7d5b8369 100644
--- a/packages/oruga/src/components/steps/tests/steps.test.ts
+++ b/packages/oruga/src/components/steps/tests/steps.test.ts
@@ -1,7 +1,13 @@
 import { describe, test, expect, afterEach } from "vitest";
 import { enableAutoUnmount, mount } from "@vue/test-utils";
+import { nextTick, defineComponent, type PropType, h } from "vue";
+
+import type { OptionsProp } from "@/composables";
 
 import OSteps from "@/components/steps/Steps.vue";
+import OStepItem from "@/components/steps/StepItem.vue";
+import OButton from "@/components/button/Button.vue";
+import type { StepItemProps, StepsProps } from "../props";
 
 describe("OSteps tests", () => {
     enableAutoUnmount(afterEach);
@@ -34,4 +40,343 @@ describe("OSteps tests", () => {
 
         expect(wrapper.classes("o-steps--vertical")).toBeTruthy();
     });
+
+    describe("integration tests", () => {
+        const Testcomponent = defineComponent({
+            components: {
+                OSteps,
+                OStepItem,
+            },
+            props: {
+                stepProps: {
+                    type: Object as PropType<StepsProps<unknown>>,
+                    default: () => {},
+                },
+                itemProps: {
+                    type: Object as PropType<StepItemProps<unknown, any>>,
+                    default: () => {},
+                },
+            },
+            template: `<OSteps v-bind="stepProps">
+                    <OStepItem v-bind="itemProps" />
+                  </OSteps>`,
+        });
+
+        test("test render correctly", () => {
+            const wrapper = mount(Testcomponent, {
+                props: {
+                    itemProps: {
+                        value: "1",
+                        step: "1",
+                        label: "Account",
+                        content: "ABC",
+                    },
+                },
+            });
+            expect(!!wrapper.vm).toBeTruthy();
+            expect(wrapper.exists()).toBeTruthy();
+            expect(wrapper.html()).toMatchSnapshot();
+
+            expect(wrapper.attributes("data-oruga")).toBe("steps");
+
+            const step = wrapper.find('[data-oruga="steps-item"]');
+            expect(step.exists()).toBeTruthy();
+            expect(step.text()).toBe("ABC");
+        });
+
+        test("render item with component prop correctly", async () => {
+            const wrapper = mount(Testcomponent, {
+                props: {
+                    itemProps: {
+                        value: "1",
+                        step: "1",
+                        component: h(OButton),
+                        props: { label: "MyButton" },
+                    },
+                },
+            });
+            await nextTick(); // await component rendering
+
+            const step = wrapper.find('[data-oruga="steps-item"]');
+            expect(step.exists()).toBeTruthy();
+
+            const button = step.find('[data-oruga="button"]');
+            expect(button.exists()).toBeTruthy();
+            expect(button.text()).toBe("MyButton");
+        });
+
+        describe("handle navigation correctly", () => {
+            const options: OptionsProp<string> = [
+                { label: "Flint", value: "flint", attrs: { clickable: true } },
+                {
+                    label: "Silver",
+                    value: "silver",
+                    attrs: { clickable: true },
+                },
+                { label: "Vane", value: "vane", attrs: { clickable: true } },
+                { label: "Billy", value: "billy", attrs: { clickable: true } },
+                { label: "Jack", value: "jack", attrs: { clickable: true } },
+            ];
+
+            test("render accordingly when item is clicked", async () => {
+                let currentIndex = 2;
+
+                const wrapper = mount(OSteps, {
+                    props: { options, modelValue: options[currentIndex].value },
+                });
+                await nextTick();
+
+                const stepElements = wrapper.findAll(".o-steps__step");
+                expect(stepElements).toHaveLength(options.length);
+
+                stepElements.forEach((el, idx) => {
+                    expect(el.classes("o-steps__step--previous")).toBe(
+                        idx < currentIndex,
+                    );
+                    expect(el.classes("o-steps__step--active")).toBe(
+                        idx == currentIndex,
+                    );
+                    expect(el.classes("o-steps__step--next")).toBe(
+                        idx > currentIndex,
+                    );
+                });
+
+                currentIndex = 4;
+                expect(stepElements[currentIndex].attributes("role")).toBe(
+                    "tab",
+                );
+
+                await stepElements[currentIndex].trigger("click");
+
+                stepElements.forEach((el, idx) => {
+                    expect(el.classes("o-steps__step--previous")).toBe(
+                        idx < currentIndex,
+                    );
+                    expect(el.classes("o-steps__step--active")).toBe(
+                        idx == currentIndex,
+                    );
+                    expect(el.classes("o-steps__step--next")).toBe(
+                        idx > currentIndex,
+                    );
+                });
+
+                currentIndex = 0;
+                expect(stepElements[currentIndex].attributes("role")).toBe(
+                    "tab",
+                );
+
+                await stepElements[currentIndex].trigger("click");
+
+                stepElements.forEach((el, idx) => {
+                    expect(el.classes("o-steps__step--previous")).toBe(
+                        idx < currentIndex,
+                    );
+                    expect(el.classes("o-steps__step--active")).toBe(
+                        idx == currentIndex,
+                    );
+                    expect(el.classes("o-steps__step--next")).toBe(
+                        idx > currentIndex,
+                    );
+                });
+
+                expect(wrapper.emitted("update:modelValue")).toStrictEqual([
+                    [options[4].value],
+                    [options[0].value],
+                ]);
+
+                expect(wrapper.emitted("change")).toStrictEqual([
+                    [options[4].value, options[2].value],
+                    [options[0].value, options[4].value],
+                ]);
+            });
+
+            test("render accordingly when prev is clicked", async () => {
+                const currentIndex = 2;
+
+                const wrapper = mount(OSteps, {
+                    props: { options, modelValue: options[currentIndex].value },
+                });
+                await nextTick();
+
+                const navigation = wrapper.find(".o-steps__navigation");
+                expect(navigation.exists()).toBeTruthy();
+
+                const buttons = navigation.findAll("button");
+                expect(buttons).toHaveLength(2);
+
+                // should be undefined because current index is 2
+                expect(buttons[0].attributes("disabled")).toBeUndefined();
+                expect(buttons[1].attributes("disabled")).toBeUndefined();
+
+                // trigger prev
+                await buttons[0].trigger("click");
+                // trigger prev
+                await buttons[0].trigger("click");
+
+                expect(wrapper.emitted("update:modelValue")).toStrictEqual([
+                    [options[currentIndex - 1].value],
+                    [options[currentIndex - 2].value],
+                ]);
+
+                expect(wrapper.emitted("change")).toStrictEqual([
+                    [
+                        options[currentIndex - 1].value,
+                        options[currentIndex].value,
+                    ],
+                    [
+                        options[currentIndex - 2].value,
+                        options[currentIndex - 1].value,
+                    ],
+                ]);
+            });
+
+            test("render accordingly when next is clicked", async () => {
+                const currentIndex = 0;
+
+                const wrapper = mount(OSteps, {
+                    props: { options, modelValue: options[currentIndex].value },
+                });
+                await nextTick();
+
+                const navigation = wrapper.find(".o-steps__navigation");
+                expect(navigation.exists()).toBeTruthy();
+
+                const buttons = navigation.findAll("button");
+                expect(buttons).toHaveLength(2);
+
+                // should be undefined because current index is 2
+                expect(buttons[0].attributes("disabled")).toBe("");
+                expect(buttons[1].attributes("disabled")).toBeUndefined();
+
+                // trigger prev
+                await buttons[1].trigger("click");
+                // trigger prev
+                await buttons[1].trigger("click");
+
+                expect(wrapper.emitted("update:modelValue")).toStrictEqual([
+                    [options[currentIndex + 1].value],
+                    [options[currentIndex + 2].value],
+                ]);
+
+                expect(wrapper.emitted("change")).toStrictEqual([
+                    [
+                        options[currentIndex + 1].value,
+                        options[currentIndex].value,
+                    ],
+                    [
+                        options[currentIndex + 2].value,
+                        options[currentIndex + 1].value,
+                    ],
+                ]);
+            });
+        });
+
+        describe("handle options props correctly", () => {
+            test("handle options as primitves correctly", async () => {
+                const options: OptionsProp = [
+                    "Flint",
+                    "Silver",
+                    "Vane",
+                    0,
+                    1,
+                    2,
+                ];
+
+                const wrapper = mount(OSteps, { props: { options } });
+                await nextTick();
+
+                const navElements = wrapper.findAll(".o-steps__step");
+                expect(navElements).toHaveLength(options.length);
+
+                const itemElements = wrapper.findAll(
+                    '[data-oruga="steps-item"]',
+                );
+                expect(itemElements).toHaveLength(options.length);
+
+                navElements.forEach((el, idx) => {
+                    expect(el.text()).toBe(String(options[idx]));
+                });
+            });
+
+            test("handle options as object correctly", async () => {
+                const options: OptionsProp = {
+                    flint: "Flint",
+                    silver: "Silver",
+                    vane: "Vane",
+                    0: "Zero",
+                    1: "One",
+                    2: "Two",
+                };
+
+                const wrapper = mount(OSteps, { props: { options } });
+                await nextTick();
+
+                const navElements = wrapper.findAll(".o-steps__step");
+                expect(navElements).toHaveLength(Object.keys(options).length);
+
+                const optionElements = wrapper.findAll(
+                    '[data-oruga="steps-item"]',
+                );
+                expect(optionElements).toHaveLength(
+                    Object.keys(options).length,
+                );
+
+                navElements.forEach((el, idx) => {
+                    expect(el.text()).toBe(Object.entries(options)[idx][1]);
+                });
+            });
+
+            test("handle options as options array correctly", async () => {
+                const options: OptionsProp<string | number> = [
+                    {
+                        label: "Flint",
+                        value: "flint",
+                        attrs: { content: "flint" },
+                    },
+                    {
+                        label: "Silver",
+                        value: "silver",
+                        attrs: { clickable: true, content: "silver" },
+                    },
+                    { label: "Vane", value: "vane", attrs: { content: "abc" } },
+                    { label: "Zero", value: 0, attrs: { content: "x" } },
+                    {
+                        label: "One",
+                        value: 1,
+                        attrs: { content: "y", disabled: true },
+                    },
+                    {
+                        label: "Two",
+                        value: 2,
+                        attrs: { clickable: true, content: "test" },
+                    },
+                ];
+
+                const wrapper = mount(OSteps, { props: { options } });
+                await nextTick();
+
+                const navElements = wrapper.findAll(".o-steps__step");
+                expect(navElements).toHaveLength(Object.keys(options).length);
+
+                const optionElements = wrapper.findAll(
+                    '[data-oruga="steps-item"]',
+                );
+                expect(optionElements).toHaveLength(options.length);
+
+                navElements.forEach((el, idx) => {
+                    expect(el.text()).toBe(options[idx].label);
+                    expect(el.classes("o-steps__step--clickable")).toBe(
+                        options[idx].attrs?.clickable || false,
+                    );
+                    expect(el.classes("o-steps__step--disabled")).toBe(
+                        options[idx].attrs?.disabled || false,
+                    );
+                });
+
+                optionElements.forEach((el, idx) => {
+                    expect(el.text()).toBe(options[idx].attrs?.content);
+                });
+            });
+        });
+    });
 });
diff --git a/packages/oruga/src/components/steps/types.ts b/packages/oruga/src/components/steps/types.ts
index de76656b8..3e99bdaf3 100644
--- a/packages/oruga/src/components/steps/types.ts
+++ b/packages/oruga/src/components/steps/types.ts
@@ -16,7 +16,6 @@ export type StepsComponent = {
 
 export type StepItemComponent<T> = StepItemProps<T, Component> & {
     $slots: Slots;
-    navClasses: ClassBind[];
     stepClasses: ClassBind[];
     iconClasses: ClassBind[];
     labelClasses: ClassBind[];
diff --git a/packages/oruga/src/components/tabs/TabItem.vue b/packages/oruga/src/components/tabs/TabItem.vue
index f226834c6..ac5128715 100644
--- a/packages/oruga/src/components/tabs/TabItem.vue
+++ b/packages/oruga/src/components/tabs/TabItem.vue
@@ -44,7 +44,7 @@ const itemValue = props.value ?? useId();
 
 const slots = useSlots();
 
-// provided data is a computed ref to enjure reactivity
+// provided data is a computed ref to ensure reactivity
 const providedData = computed<TabItemComponent<T>>(() => ({
     ...props,
     value: itemValue,
@@ -126,13 +126,13 @@ const tabClasses = defineClasses(
         computed(() => props.disabled),
     ],
     [
-        "navItemPreviousClass",
+        "tabPreviousClass",
         "o-tabs__tab--previous",
         null,
         computed(() => item.value.index < parent.value?.activeIndex),
     ],
     [
-        "navItemNextClass",
+        "tabNextClass",
         "o-tabs__tab--next",
         null,
         computed(() => item.value.index > parent.value?.activeIndex),
diff --git a/packages/oruga/src/components/tabs/Tabs.vue b/packages/oruga/src/components/tabs/Tabs.vue
index b7fe819db..928da2a0a 100644
--- a/packages/oruga/src/components/tabs/Tabs.vue
+++ b/packages/oruga/src/components/tabs/Tabs.vue
@@ -51,7 +51,6 @@ const props = withDefaults(defineProps<TabsProps<T>>(), {
     type: () => getDefault("tabs.type", "default"),
     tag: () => getDefault("tabs.tag", "div"),
     expanded: false,
-    destroyOnHide: false,
     activateOnFocus: false,
     animated: () => getDefault("tabs.animated", true),
     animation: () =>
@@ -82,10 +81,7 @@ const emits = defineEmits<{
 
 const rootRef = useTemplateRef("rootElement");
 
-/** The selected item value, use v-model to make it two-way binding */
-const vmodel = defineModel<ModelValue>({ default: undefined });
-
-// provided data is a computed ref to enjure reactivity
+// provided data is a computed ref to ensure reactivity
 const provideData = computed<TabsComponent>(() => ({
     activeIndex: activeItem.value?.index ?? 0,
     type: props.type,
@@ -118,6 +114,9 @@ const normalizedOptions = computed(() =>
     normalizeOptions<T>(props.options, nextSequence),
 );
 
+/** The selected item value, use v-model to make it two-way binding */
+const vmodel = defineModel<ModelValue>({ default: undefined });
+
 /**  When v-model is changed set the new active tab. */
 watch(
     () => props.modelValue,
@@ -143,63 +142,61 @@ const isTransitioning = computed(() =>
 
 onMounted(() => {
     // set first tab as default if not defined
-    if (!vmodel.value) vmodel.value = items.value[0]?.value as T;
+    if (!vmodel.value) vmodel.value = items.value[0]?.value;
 });
 
 // --- EVENT HANDLER ---
 
 /** Tab item click listener, emit input event and change active child. */
-function tabClick(item: TabItem<T>): void {
-    if (vmodel.value !== item.value) performAction(item.value as T);
+function itemClick(item: TabItem<T>): void {
+    if (vmodel.value !== item.value) performAction(item.value);
 }
 
-/** Go to the next item or wrap around */
-function next(event: KeyboardEvent, index: number): void {
+/** Focus the next item or wrap around. */
+function onNext(event: KeyboardEvent, index: number): void {
     if (
         (props.vertical && event.key == "ArrowDown") ||
         (!props.vertical && event.key == "ArrowRight")
     ) {
-        event.preventDefault(); // prevent default browser scrolling
         const newIndex = mod(index + 1, items.value.length);
         const item = getFirstViableItem(newIndex, true);
         moveFocus(item);
     }
 }
 
-/** Go to the previous item or wrap around */
-function prev(event: KeyboardEvent, index: number): void {
+/** Focus the previous item or wrap around. */
+function onPrev(event: KeyboardEvent, index: number): void {
     if (
         (props.vertical && event.key == "ArrowUp") ||
         (!props.vertical && event.key == "ArrowLeft")
     ) {
-        event.preventDefault(); // prevent default browser scrolling
         const newIndex = mod(index - 1, items.value.length);
         const item = getFirstViableItem(newIndex, false);
         moveFocus(item);
     }
 }
 
-/** Go to the first viable item */
-function homePressed(): void {
+/** Focus to the first viable item. */
+function onHomePressed(): void {
     if (items.value.length < 1) return;
     const item = getFirstViableItem(0, true);
     moveFocus(item);
 }
 
-/** Go to the last viable item */
-function endPressed(): void {
+/** Focus to the last viable item. */
+function onEndPressed(): void {
     if (items.value.length < 1) return;
     const item = getFirstViableItem(items.value.length - 1, false);
     moveFocus(item);
 }
 
-/** Set focus on a tab item. */
+/** Set focus on a tab item or click it if `activateOnFocus`. */
 function moveFocus(item: TabItem<T>): void {
     if (props.activateOnFocus) {
-        tabClick(item);
+        itemClick(item);
     } else {
         const el = rootRef.value?.querySelector<HTMLElement>(
-            `#tab-${item.identifier} > *`,
+            `#tab-${item.identifier}`,
         );
         el?.focus();
     }
@@ -230,8 +227,8 @@ function getFirstViableItem(
     return items.value[newIndex];
 }
 
-/** Activate next child and deactivate prev child */
-function performAction(newValue: T): void {
+/** Activate next child and deactivate prev child. */
+function performAction(newValue: ModelValue): void {
     const oldValue = vmodel.value;
     const oldItem = activeItem.value;
     const newItem =
@@ -316,19 +313,21 @@ const contentClasses = defineClasses(
                 name="header"
                 :class="childItem.tabClasses"
                 role="tab"
+                :tabindex="childItem.value === activeItem?.value ? 0 : -1"
+                :aria-current="
+                    childItem.value === activeItem?.value ? 'true' : undefined
+                "
                 :aria-controls="`tabpanel-${childItem.identifier}`"
                 :aria-selected="childItem.value === activeItem?.value"
-                :tabindex="
-                    childItem.value === activeItem?.value ? undefined : '-1'
-                "
-                @click="tabClick(childItem)"
-                @keydown.enter="tabClick(childItem)"
-                @keydown.left.prevent="prev"
-                @keydown.right.prevent="next"
-                @keydown.up.prevent="prev"
-                @keydown.down.prevent="next"
-                @keydown.home.prevent="homePressed"
-                @keydown.end.prevent="endPressed">
+                @click="itemClick(childItem)"
+                @keydown.enter.prevent="itemClick(childItem)"
+                @keydown.space.prevent="itemClick(childItem)"
+                @keydown.left.prevent="onPrev($event, childItem.index)"
+                @keydown.right.prevent="onNext($event, childItem.index)"
+                @keydown.up.prevent="onPrev($event, childItem.index)"
+                @keydown.down.prevent="onNext($event, childItem.index)"
+                @keydown.home.prevent="onHomePressed"
+                @keydown.end.prevent="onEndPressed">
                 <o-icon
                     v-if="childItem.icon"
                     :class="childItem.iconClasses"
diff --git a/packages/oruga/src/components/tabs/tests/__snapshots__/tabs.test.ts.snap b/packages/oruga/src/components/tabs/tests/__snapshots__/tabs.test.ts.snap
index c5704183c..64bd8431b 100644
--- a/packages/oruga/src/components/tabs/tests/__snapshots__/tabs.test.ts.snap
+++ b/packages/oruga/src/components/tabs/tests/__snapshots__/tabs.test.ts.snap
@@ -5,7 +5,7 @@ exports[`OTabs tests > OTab with OTabItem integration tests > test render correc
   <div class="o-tabs__tablist" role="tablist" aria-orientation="horizontal">
     <!--
                 @slot Additional slot before tabs
-            --><button id="tab-1" class="o-tabs__tab o-tabs__tab--default o-tabs__tab--active" role="tab" aria-controls="tabpanel-1" aria-selected="true">
+            --><button id="tab-1" class="o-tabs__tab o-tabs__tab--default o-tabs__tab--active" role="tab" tabindex="0" aria-current="true" aria-controls="tabpanel-1" aria-selected="true">
       <!--v-if--><span class="o-tabs__tab-label">Account</span>
     </button>
     <!--
@@ -37,7 +37,7 @@ exports[`OTabs tests > OTab with OTabItem integration tests > test render correc
 `;
 
 exports[`OTabs tests > OTabItem > render correctly 1`] = `
-"<button id="tab-2" class="o-tabs__tab o-tabs__tab--default o-tabs__tab--next" role="tab" aria-controls="tabpanel-2" aria-selected="false" tabindex="-1">
+"<button id="tab-2" class="o-tabs__tab o-tabs__tab--default o-tabs__tab--next" role="tab" tabindex="-1" aria-controls="tabpanel-2" aria-selected="false">
   <!--v-if--><span class="o-tabs__tab-label"></span>
 </button>"
 `;
diff --git a/packages/oruga/src/components/tabs/types.ts b/packages/oruga/src/components/tabs/types.ts
index 9e9df4f87..92cfe3d9c 100644
--- a/packages/oruga/src/components/tabs/types.ts
+++ b/packages/oruga/src/components/tabs/types.ts
@@ -13,7 +13,6 @@ export type TabsComponent = {
     animateInitially: boolean;
 };
 
-
 export type TabItemComponent<T> = TabItemProps<T, Component> & {
     $slots: Slots;
     tabClasses: ClassBind[];
diff --git a/packages/oruga/src/components/types.ts b/packages/oruga/src/components/types.ts
index e4cc7eefd..f1c6776ce 100644
--- a/packages/oruga/src/components/types.ts
+++ b/packages/oruga/src/components/types.ts
@@ -1041,23 +1041,15 @@ In addition, any CSS selector string or an actual DOM node can be used. */
                 icon: string;
                 /** Icon pack */
                 iconPack: string;
-                /** Step item tag name */
-                itemTag: DynamicComponent;
-                /** Role attribute to be passed to the li wrapper for better accessibility */
-                ariaRole: string;
-                /** Class of the nav item */
-                navItemClass: ClassDefinition;
-                /** Class of the nav item when active */
-                navItemActiveClass: ClassDefinition;
-                /** Class of the nav item before the active one */
-                navItemPreviousClass: ClassDefinition;
-                /** Class of the nav item after the active one */
-                navItemNextClass: ClassDefinition;
-                /** Class of the nav item with variant (default value by parent steps component) */
-                navItemVariantClass: ClassDefinition;
                 /** Class of the step item */
                 stepClass: ClassDefinition;
-                /** Class of the tab item when active */
+                /** Class of the step item with variant (default value by parent steps component) */
+                stepVariantClass: ClassDefinition;
+                /** Class of the step item before the active one */
+                stepPreviousClass: ClassDefinition;
+                /** Class of the step item after the active one */
+                stepNextClass: ClassDefinition;
+                /** Class of the step item when active */
                 stepActiveClass: ClassDefinition;
                 /** Class of the step item when clickable */
                 stepClickableClass: ClassDefinition;
@@ -1089,6 +1081,8 @@ In addition, any CSS selector string or an actual DOM node can be used. */
                 labelPosition: "bottom" | "left" | "right";
                 /** Mobile breakpoint as `max-width` value */
                 mobileBreakpoint: string;
+                /** Accessibility aria-label to be passed to the tablist wrapper element */
+                ariaLabel: string;
                 /** Accessibility next button aria label */
                 ariaNextLabel: string;
                 /** Accessibility previous button aria label */
@@ -1105,8 +1099,8 @@ In addition, any CSS selector string or an actual DOM node can be used. */
                 positionClass: ClassDefinition;
                 /** Class of steps component when on mobile */
                 mobileClass: ClassDefinition;
-                /** Class of the steps nav container */
-                navClass: ClassDefinition;
+                /** Class of the steps list container */
+                listClass: ClassDefinition;
                 /** Class of Steps component when animation gets triggered */
                 animatedClass: ClassDefinition;
                 /** Class of the Steps component dividers */