From f01a871f8e155108f30e8402e183ab64ef2d387c Mon Sep 17 00:00:00 2001
From: Przemek Spaczek <przemyslaw.spaczek@infermedica.com>
Date: Mon, 15 Jan 2024 15:44:51 +0100
Subject: [PATCH] fix: no focus after open new page (#330)

* fix: no focus after open new page

* feat: focus menu button on back

* fix(ts): tabindex in menuItems

* fix: use nextTick to prevent to fast focusing

* fix(ts): solve TS18047 and TS2464 errors

* fix(ts): solve TS7053 error
---
 .../UiHorizontalPaging/UiHorizontalPaging.vue | 26 +++++++++++++++++++
 .../_internal/UiHorizontalPagingItem.vue      | 20 ++++++++++++++
 src/components/organisms/UiMenu/UiMenu.vue    |  8 +++++-
 src/utilities/helpers/focus-element/index.ts  |  2 +-
 4 files changed, 54 insertions(+), 2 deletions(-)

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 }"
         >
           <UiMenu
+            ref="menu"
             :items="menuItems"
             class="ui-horizontal-paging__menu"
           />
@@ -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<MenuItemAttrsProps[]>(() => itemsAsArray.value.map((i
         item,
       ];
     },
+    ...(isActive.value ? { tabindex: '-1' } : {}),
     ...rest,
   };
 }));
+const menu = ref<InstanceType<typeof UiMenu> | null>(null);
+const menuButtons = computed < Record<string, any>>(() => {
+  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]);
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
index 9150daad4..fd73e78b2 100644
--- a/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
+++ b/src/components/organisms/UiHorizontalPaging/_internal/UiHorizontalPagingItem.vue
@@ -1,17 +1,26 @@
 <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,
+  nextTick,
 } from 'vue';
 import type { HorizontalPangingHandleItems } from '../UiHorizontalPaging.vue';
+import { focusElement } from '../../../../utilities/helpers';
 
 export interface HorizontalPangingItemProps {
   /**
@@ -35,6 +44,17 @@ 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/UiMenu/UiMenu.vue b/src/components/organisms/UiMenu/UiMenu.vue
index c1de1e6ec..dc00d708b 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<InstanceType<typeof UiMenuItem>[] | null>(null);
+defineExpose({ menuItems });
 const menuItemAttrs = ({
   /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
   name, label, ...itemAttrs
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');