fix: different focus order in mobile menu side panel

src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.js

@@ -1,6 +1,8 @@
 import {
   ref,
+  watch,
   computed,
+  nextTick,
 } from 'vue';
 import UiHorizontalPaging from '@/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue';
 import UiText from '@/components/atoms/UiText/UiText.vue';
@@ -15,6 +17,7 @@ import UiSidePanel from '@/components/organisms/UiSidePanel/UiSidePanel.vue';
 import UiHorizontalPagingItem from '@/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue';
 import { actions } from '@storybook/addon-actions';
 import './UiHorizontalPaging.stories.scss';
+import { focusElement } from '../../../utilities/helpers';
 
 const events = actions({ onUpdateModelValue: 'update:modelValue' });
 
@@ -410,13 +413,21 @@ export const AsMobileMenu = {
       const handleBackClick = () => {
         modelValue.value = modelValue.value.slice(0, -1);
       };
+      const backButton = ref(null);
+      watch(isActive, async (active) => {
+        if (active) {
+          await nextTick();
+          focusElement(backButton.value?.$el, true);
+        }
+      });
       return {
         ...args,
         ...events,
         title,
         modelValue,
         previous,
         isActive,
+        backButton,
         handleBackClick,
       };
     },
@@ -429,7 +440,8 @@ export const AsMobileMenu = {
         <div class="horizontal-paging-as-mobile-menu__title">
           <UiButton
             v-if="isActive"
-            class="ui-button--icon"
+            ref="backButton"
+            class="ui-button--icon horizontal-paging-as-mobile-menu__back"
             @click="handleBackClick"
           >
             <UiIcon

src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.scss

@@ -79,5 +79,10 @@
     display: flex;
     gap: var(--space-12);
   }
+
+  &__back {
+    align-self: flex-start;
+    margin-block-start: 3px;
+  }
 }
 //</Code>

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

@@ -1,10 +1,4 @@
 <template>
-  <span
-    ref="el"
-    class="visual-hidden"
-    :tabindex="tabindex"
-    @blur="handleA11YHelperBlur"
-  />
   <slot v-if="isActive" />
 </template>
 
@@ -44,17 +38,6 @@ 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, async (value) => {
-  tabindex.value = 0;
-  if (!value) return;
-  await nextTick();
-  focusElement(el.value);
-});
-const handleA11YHelperBlur = () => {
-  tabindex.value = -1;
-};
 const item = computed(() => ({
   label: props.label,
   title: props.title,

src/components/organisms/UiSidePanel/UiSidePanel.vue

@@ -61,27 +61,6 @@
             }"
           >
             <div class="ui-side-panel__header">
-              <!-- @slot Use this slot to replace close template. -->
-              <slot
-                name="close"
-                v-bind="{
-                  buttonCloseAttrs,
-                  closeHandler,
-                  iconCloseAttrs: defaultProps.iconCloseAttrs,
-                }"
-              >
-                <UiButton
-                  v-bind="buttonCloseAttrs"
-                  ref="button"
-                  class="ui-button--icon ui-button--theme-secondary ui-side-panel__close"
-                  @click="closeHandler"
-                >
-                  <UiIcon
-                    v-bind="defaultProps.iconCloseAttrs"
-                    class="ui-button__icon"
-                  />
-                </UiButton>
-              </slot>
               <!-- @slot Use this slot to replace label template. -->
               <slot
                 name="label"
@@ -129,6 +108,27 @@
                   </slot>
                 </div>
               </slot>
+              <!-- @slot Use this slot to replace close template. -->
+              <slot
+                name="close"
+                v-bind="{
+                  buttonCloseAttrs,
+                  closeHandler,
+                  iconCloseAttrs: defaultProps.iconCloseAttrs,
+                }"
+              >
+                <UiButton
+                  v-bind="buttonCloseAttrs"
+                  ref="button"
+                  class="ui-button--icon ui-button--theme-secondary ui-side-panel__close"
+                  @click="closeHandler"
+                >
+                  <UiIcon
+                    v-bind="defaultProps.iconCloseAttrs"
+                    class="ui-button__icon"
+                  />
+                </UiButton>
+              </slot>
             </div>
           </slot>
           <!-- @slot Use this slot to replace content template. -->
@@ -350,10 +350,11 @@ onBeforeUnmount(() => {
 
   &__header {
     @include mixins.use-logical($element + "-header", padding, var(--space-20));
+    @include mixins.override-logical('button', null, border-radius, var(--border-radius-form));
 
     display: flex;
     flex: none;
-    flex-direction: functions.var($element + "-header", flex-direction, row-reverse);
+    flex-direction: functions.var($element + "-header", flex-direction, row);
     background: functions.var($element + "-header", background, var(--color-background-subtle));
     gap: functions.var($element + "-header", gap, var(--space-16));