From 99eabc1169162503669e088de7049668e047790d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Wed, 10 Jan 2024 15:17:01 +0100
Subject: [PATCH 1/6] fix: no focus after open new page

---
 .../UiHorizontalPaging/UiHorizontalPaging.vue  |  7 ++++---
 .../_internal/UiHorizontalPagingItem.vue       | 18 ++++++++++++++++++
 src/utilities/helpers/focus-element/index.ts   |  2 +-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index df01b8977..1517b9f7e 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/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. -->
@@ -226,6 +226,7 @@ const menuItems = computed<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((i
         item,
       ];
     },
+    tabindex: isActive.value ? '-1' : null,
     ...rest,
   };
 }));
diff --git a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
index 9150daad4..3fb69948b 100644
--- a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
+++ b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
@@ -1,10 +1,17 @@
 <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,
@@ -12,6 +19,7 @@ import {
   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,
diff --git a/src/utilities/helpers/focus-element/index.ts b/src/utilities/helpers/focus-element/index.ts
index 60ca0fc46..69890efa6 100644
--- a/src/utilities/helpers/focus-element/index.ts
+++ b/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');

From 58d9f7871d6dd2894e1d545556c93f96ce1e0868 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Fri, 12 Jan 2024 15:23:15 +0100
Subject: [PATCH 2/6] feat: focus menu button on back

---
 .../UiHorizontalPaging/UiHorizontalPaging.vue    | 16 ++++++++++++++++
 src/components/organisms/UiMenu/UiMenu.vue       |  8 +++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index 1517b9f7e..0078a14e9 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
@@ -58,6 +58,7 @@
           v-bind="{ items: menuItems }"
         >
           <UiMenu
+            ref="menu"
             :items="menuItems"
             class="ui-horizontal-paging__menu"
           />
@@ -96,10 +97,12 @@ import {
   computed,
   provide,
   inject,
+  watch,
   type ComputedRef,
   type WritableComputedRef,
   type Ref,
 } from 'vue';
+import { focusElement } from '../../../utilities/helpers';
 import type {
   Icon,
   DefineAttrsProps,
@@ -230,6 +233,19 @@ const menuItems = computed<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((i
     ...rest,
   };
 }));
+const menu = ref<InstanceType<typeof UiMenu> | null>(null);
+const menuButtons = computed(() => {
+  if (!menu.value) return {};
+  return itemsAsArray.value.reduce((elements, { name }, order) => ({
+    ...elements,
+    [name]: menu.value.menuItems[order].$el.querySelector('button'),
+  }), {});
+});
+watch(activeItemName, (moveTo, backFrom) => {
+  if (backFrom) {
+    focusElement(menuButtons.value[backFrom]);
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/src/components/organisms/UiMenu/UiMenu.vue b/src/components/organisms/UiMenu/UiMenu.vue
index c1de1e6ec..876286e5d 100644
--- a/src/components/organisms/UiMenu/UiMenu.vue
+++ b/src/components/organisms/UiMenu/UiMenu.vue
@@ -7,6 +7,7 @@
         :key="key"
       >
         <UiMenuItem
+          ref="menuItems"
           v-bind="menuItemAttrs(item)"
         >
           <template
@@ -32,7 +33,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import {
+  ref,
+  computed,
+} from 'vue';
 import UiList from '../UiList/UiList.vue';
 import type { ListAttrsProps } from '../UiList/UiList.vue';
 import UiMenuItem from './_internal/UiMenuItem.vue';
@@ -52,6 +56,8 @@ export interface MenuProps {
 export type MenuAttrsProps = DefineAttrsProps<MenuProps, ListAttrsProps>;
 
 const props = withDefaults(defineProps<MenuProps>(), { items: () => ([]) });
+const menuItems = ref(null);
+defineExpose({ menuItems });
 const menuItemAttrs = ({
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   name, label, ...itemAttrs

From 7974feedb2a5ab4e17d32dc564ff4b2023fd08c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Mon, 15 Jan 2024 13:48:31 +0100
Subject: [PATCH 3/6] fix(ts): tabindex in menuItems

---
 .../organisms/UiHorizontalPaging/UiHorizontalPaging.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index 0078a14e9..a02aac1db 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
@@ -229,7 +229,7 @@ const menuItems = computed<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((i
         item,
       ];
     },
-    tabindex: isActive.value ? '-1' : null,
+    ...(isActive.value ? { tabindex: '-1' } : {}),
     ...rest,
   };
 }));

From c8537ade58c79385b5e0339fe69e7c3d035a52b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Mon, 15 Jan 2024 13:58:19 +0100
Subject: [PATCH 4/6] fix: use nextTick to prevent to fast focusing

---
 .../organisms/UiHorizontalPaging/UiHorizontalPaging.vue       | 4 +++-
 .../UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index a02aac1db..5751ccf38 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
@@ -101,6 +101,7 @@ import {
   type ComputedRef,
   type WritableComputedRef,
   type Ref,
+  nextTick,
 } from 'vue';
 import { focusElement } from '../../../utilities/helpers';
 import type {
@@ -241,8 +242,9 @@ const menuButtons = computed(() => {
     [name]: menu.value.menuItems[order].$el.querySelector('button'),
   }), {});
 });
-watch(activeItemName, (moveTo, backFrom) => {
+watch(activeItemName, async (moveTo, backFrom) => {
   if (backFrom) {
+    await nextTick();
     focusElement(menuButtons.value[backFrom]);
   }
 });
diff --git a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
index 3fb69948b..fd73e78b2 100644
--- a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
+++ b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
@@ -17,6 +17,7 @@ import {
   onBeforeUnmount,
   type Ref,
   type ComputedRef,
+  nextTick,
 } from 'vue';
 import type { HorizontalPangingHandleItems } from '../UiHorizontalPaging.vue';
 import { focusElement } from '../../../../utilities/helpers';
@@ -45,9 +46,10 @@ 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) => {
+watch(isActive, async (value) => {
   tabindex.value = 0;
   if (!value) return;
+  await nextTick();
   focusElement(el.value);
 });
 const handleA11YHelperBlur = () => {

From 0db4506b9039776c1a4876c0046c3824691e3b02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Mon, 15 Jan 2024 14:12:03 +0100
Subject: [PATCH 5/6] fix(ts): solve TS18047 and TS2464 errors

---
 .../UiHorizontalPaging/UiHorizontalPaging.vue     | 15 +++++++++++----
 src/components/organisms/UiMenu/UiMenu.vue        |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index 5751ccf38..c701e9ea5 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
@@ -237,10 +237,17 @@ const menuItems = computed<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((i
 const menu = ref<InstanceType<typeof UiMenu> | null>(null);
 const menuButtons = computed(() => {
   if (!menu.value) return {};
-  return itemsAsArray.value.reduce((elements, { name }, order) => ({
-    ...elements,
-    [name]: menu.value.menuItems[order].$el.querySelector('button'),
-  }), {});
+  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) {
diff --git a/src/components/organisms/UiMenu/UiMenu.vue b/src/components/organisms/UiMenu/UiMenu.vue
index 876286e5d..dc00d708b 100644
--- a/src/components/organisms/UiMenu/UiMenu.vue
+++ b/src/components/organisms/UiMenu/UiMenu.vue
@@ -56,7 +56,7 @@ export interface MenuProps {
 export type MenuAttrsProps = DefineAttrsProps<MenuProps, ListAttrsProps>;
 
 const props = withDefaults(defineProps<MenuProps>(), { items: () => ([]) });
-const menuItems = ref(null);
+const menuItems = ref<InstanceType<typeof UiMenuItem>[] | null>(null);
 defineExpose({ menuItems });
 const menuItemAttrs = ({
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */

From 4837959a5d54c989eac4d519e8a1bb8d764234d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20Spaczek?=
 <przemyslaw.spaczek@infermedica.com>
Date: Mon, 15 Jan 2024 15:37:00 +0100
Subject: [PATCH 6/6] fix(ts): solve TS7053 error

---
 .../organisms/UiHorizontalPaging/UiHorizontalPaging.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
index c701e9ea5..3d975605c 100644
--- a/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
+++ b/src/components/organisms/UiHorizontalPaging/UiHorizontalPaging.vue
@@ -235,7 +235,7 @@ const menuItems = computed<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((i
   };
 }));
 const menu = ref<InstanceType<typeof UiMenu> | null>(null);
-const menuButtons = computed(() => {
+const menuButtons = computed < Record<string, any>>(() => {
   if (!menu.value) return {};
   return itemsAsArray.value.reduce((elements, { name }, order) => {
     if (!name