chore: add microtask before handling focus

Author: userquin

packages/router/src/focus.ts

@@ -1,5 +1,6 @@
 import type { RouteLocationNormalized } from './typed-routes'
 import { Router, RouterOptions } from './router'
+import { nextTick } from 'vue'
 
 export function enableFocusManagement(router: Router) {
   // navigation-api router will handle this for us
@@ -13,7 +14,7 @@ export function enableFocusManagement(router: Router) {
     clearFocusTimeout()
   })
 
-  const unregister = router.afterEach(async (to, from) => {
+  const unregister = router.afterEach(async to => {
     const focusManagement =
       to.meta.focusManagement ?? router.options.focusManagement
 
@@ -31,6 +32,9 @@ export function enableFocusManagement(router: Router) {
       selector = focusManagement
     }
 
+    // ensure DOM is updated, enqueuing a microtask before handling focus
+    await nextTick()
+
     handleFocus(selector)
   })
 
@@ -65,6 +69,7 @@ export function prepareFocusReset(
 
 export function createFocusManagementHandler() {
   let timeoutId: ReturnType<typeof setTimeout> | undefined
+
   return {
     handleFocus: (selector: string) => {
       clearTimeout(timeoutId)
@@ -100,5 +105,5 @@ function handleFocusManagement(
     target.focus({ preventScroll: true })
     // remove tabindex and event listener if focus still not worked
     if (document.activeElement !== target) restoreTabindex()
-  }, 0)
+  }, 150) // screen readers may need more time to react
 }

packages/router/src/navigation-api/index.ts

@@ -1,4 +1,4 @@
-import type { App } from 'vue'
+import { App, nextTick } from 'vue'
 import { shallowReactive, shallowRef, unref } from 'vue'
 import {
   parseURL,
@@ -310,7 +310,10 @@ export function createNavigationApiRouter(
       // - focusReset: manual, selector with value -> prevent scrolling when focusing the target selector element
       // We don't need to handle scroll here, the browser or user guards or components lifecycle hooks will handle it
       if (focusReset === 'manual' && selector) {
-        handleFocus(selector)
+        // ensure DOM is updated, enqueuing a microtask before handling focus
+        nextTick(() => {
+          handleFocus(selector)
+        })
       }
     }
   }