diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index e942aec4f..3d975605c 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
@@ -58,6 +58,7 @@
v-bind="{ items: menuItems }"
>
@@ -96,10 +97,13 @@ import {
computed,
provide,
inject,
+ watch,
type ComputedRef,
type WritableComputedRef,
type Ref,
+ nextTick,
} from 'vue';
+import { focusElement } from '../../../utilities/helpers';
import type {
Icon,
DefineAttrsProps,
@@ -226,9 +230,31 @@ const menuItems = computed(() => itemsAsArray.value.map((i
item,
];
},
+ ...(isActive.value ? { tabindex: '-1' } : {}),
...rest,
};
}));
+const menu = ref | null>(null);
+const menuButtons = computed < Record>(() => {
+ if (!menu.value) return {};
+ return itemsAsArray.value.reduce((elements, { name }, order) => {
+ if (!name
+ || !menu.value
+ || !menu.value.menuItems) {
+ return elements;
+ }
+ return {
+ ...elements,
+ [name]: menu.value.menuItems[order].$el.querySelector('button'),
+ };
+ }, {});
+});
+watch(activeItemName, async (moveTo, backFrom) => {
+ if (backFrom) {
+ await nextTick();
+ focusElement(menuButtons.value[backFrom]);
+ }
+});