vuestorefront / storefront-ui

A frontend library for React and Vue that helps developers quickly build fast, accessible, and beautiful storefronts. Made with 💚 by Vue Storefront team and contributors.
https://storefrontui.io
MIT License
2.35k stars 455 forks source link

[Bug]: React useTrapFocus not working for SfDrawer #3225

Open rafabernad opened 2 months ago

rafabernad commented 2 months ago

Describe the Bug

useTrapFocus show keep the focus inside all focusable elements in Sfdrawer, but seems to be working only working for the first focusable element.

This wrong behavior can be seen in the storefront-ui demos: Drawer transition and trap focus preview, where the focus is kept in the close icon.

As a side effect, is not possible to have an input inside a drawer, as it never gets focused.

Expected behavior

Using tab, user should be able to move through all the focusable elements.

Steps to reproduce

See: Drawer transition and trap focus

SFUI version

@storefront-ui/react@2.7.0

Framework

Next.js

Node version

v20.3.0

Browser

Chrome

OS

MacOS

Relevant log output

No response

Able to fix / change the documentation?

Code of Conduct