From e15d18f8d760f278e99bf143aa1ffdd6ffc6288a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Tue, 16 Jan 2024 11:40:11 +0100
Subject: [PATCH 1/2] fix: different focus order in mobile menu side panel

---
 .../_internal/UiHorizontalPagingItem.vue      | 17 -------
 .../organisms/UiSidePanel/UiSidePanel.vue     | 44 +++++++++----------
 2 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
index fd73e78b2..07a132f97 100644
--- a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
+++ b/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,
diff --git a/src/components/organisms/UiSidePanel/UiSidePanel.vue b/src/components/organisms/UiSidePanel/UiSidePanel.vue
index 8346b2090..e824d8147 100644
--- a/src/components/organisms/UiSidePanel/UiSidePanel.vue
+++ b/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. -->
@@ -353,7 +353,7 @@ onBeforeUnmount(() => {
 
     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));
 

From 064dc8664097b3fa2f312481d85bc33ee466b5f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Tue, 16 Jan 2024 11:51:17 +0100
Subject: [PATCH 2/2] fix: back button focus after open page

---
 .../UiHorizontalPaging.stories.js                  | 14 +++++++++++++-
 .../UiHorizontalPaging.stories.scss                |  5 +++++
 .../organisms/UiSidePanel/UiSidePanel.vue          |  1 +
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.js b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.js
index 6758a3bc0..33f528e9e 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.js
+++ b/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,6 +413,13 @@ 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,
@@ -417,6 +427,7 @@ export const AsMobileMenu = {
         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
diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.scss b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.scss
index 2e49ef344..f956f4692 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.stories.scss
+++ b/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>
diff --git a/src/components/organisms/UiSidePanel/UiSidePanel.vue b/src/components/organisms/UiSidePanel/UiSidePanel.vue
index e824d8147..bcee8374f 100644
--- a/src/components/organisms/UiSidePanel/UiSidePanel.vue
+++ b/src/components/organisms/UiSidePanel/UiSidePanel.vue
@@ -350,6 +350,7 @@ 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;