fix: no focus after display horizontal paging page content

src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="[
-      'ui-horizontal-paging', { 'ui-horizontal-paging--nested': isNested }
+      'ui-horizontal-paging', { 'ui-horizontal-paging--nested': isNested },
     ]"
   >
     <!-- @slot Use this slot to replace header template. -->
@@ -37,7 +37,7 @@
           name="title"
           v-bind="{
             headingTitleAttrs,
-            title: currentTitle
+            title: currentTitle,
           }"
         >
           <UiHeading v-bind="headingTitleAttrs">
@@ -49,7 +49,7 @@
     <div class="ui-horizontal-paging__wrapper">
       <div
         :class="[
-          'ui-horizontal-paging__section', { 'ui-horizontal-paging__section--is-active': isActive }
+          'ui-horizontal-paging__section', { 'ui-horizontal-paging__section--is-active': isActive },
         ]"
       >
         <!-- @slot Use this slot to replace menu template. -->
@@ -208,7 +208,7 @@
 const handleBackClick = () => {
   activeItems.value = activeItems.value.slice(0, -1);
 };
 const menuItems = computed<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((item) => {
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
     title,
@@ -226,6 +226,7 @@
         item,
       ];
     },
+    tabindex: isActive.value ? '-1' : null,
     ...rest,
   };
 }));

src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue

@@ -1,17 +1,25 @@
 <template>
+  <span
+    ref="el"
+    class="visual-hidden"
+    :tabindex="tabindex"
+    @blur="handleA11YHelperBlur"
+  />
   <slot v-if="isActive" />
 </template>
 
 <script setup lang="ts">
 import {
   computed,
+  watch,
   ref,
   inject,
   onBeforeUnmount,
   type Ref,
   type ComputedRef,
 } from 'vue';
 import type { HorizontalPangingHandleItems } from '../UiHorizontalPaging.vue';
+import { focusElement } from '../../../../utilities/helpers';
 
 export interface HorizontalPangingItemProps {
   /**
@@ -35,6 +43,16 @@ const props = withDefaults(defineProps<HorizontalPangingItemProps>(), {
 });
 const activeItemName = inject<ComputedRef<string>>('activeItemName', computed(() => ''));
 const isActive = computed(() => activeItemName.value === props.name);
+const el = ref<HTMLSpanElement | null>(null);
+const tabindex = ref(0);
+watch(isActive, (value) => {
+  tabindex.value = 0;
+  if (!value) return;
+  focusElement(el.value);
+});
+const handleA11YHelperBlur = () => {
+  tabindex.value = -1;
+};
 const item = computed(() => ({
   label: props.label,
   title: props.title,

src/utilities/helpers/focus-element/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-export const focusElement = (el: HTMLElement, focusVisible = false): Promise<void> => {
+export const focusElement = (el: HTMLElement | null, focusVisible = false): Promise<void> => {
   if (el) {
     if (focusVisible) {
       document.body.classList.remove('focus-hidden');