Custom focus trap vs native dialog for Vue Storefront overlays

Vue Storefront's accessibility challenge with overlay focus management

Vue Storefront's composable frontend renders overlays like the cart drawer, login modal, and search panel as Vue components within the theme layer. A persistent accessibility question centers on how to handle keyboard focus when these overlays open: should the implementation rely on a custom JavaScript-based focus trap, or leverage the native HTML element's built-in focus containment?

Custom focus-trap solutions offer full control over styling and animations, ensuring consistent behavior across older browsers. However, they require developers to manually manage focus restoration to the trigger element on close—a step that is frequently overlooked, potentially disorienting keyboard users. Conversely, native elements provide automatic focus containment and proper screen reader semantics through showModal(), but historically demand polyfills for Safari compatibility and limit entrance/exit transition effects.

Given Vue Storefront's theme-overridable architecture, any accessibility improvement must be implemented in the active theme rather than inherited from the default. Additionally, SSR hydration timing can interfere with focus() calls if executed before the component mounts. Which approach better balances accessibility compliance, cross-browser support, and developer flexibility for the current Vue Storefront version in use?