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]); + } +});