[Bug Report][3.0.1] v-navigation-drawer does not have focus trap

[rafaeldsousa]

Environment

Vuetify Version: 3.0.1 Vue Version: 3.2.45 Browsers: Chrome 107.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Just open the drawer and hit tab, the focused element is not within the drawer. Drawer is not being focused. I can see the same behaviour happening for the v-menu, the overlay is created but not focus trap is added.

The docs for v-menu state that (no reference of this for v-navigation-drawer) By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.

Expected Behavior

Once drawer is open, focus should be trapped within new element. As per Material UI drawers (Open any of the example drawers and hit tab) https://mui.com/material-ui/react-drawer/

Actual Behavior

Drawer and V-Menu is opened and focus is not set to overlay div.

Reproduction Link

https://codepen.io/rafaeldesousa/pen/abKqLgL

[atilkan]

Have the same problem.

[rafaeldsousa]

Seems like the problem also affects the v-overlay component, which is used for temporary drawers and menus. Focus is not changed when element is created.

Both v2-3 have the same behaviour. Open the overlay and hit tab, you'll see that the focus isn't within the recently opened overlay.

https://vuetifyjs.com/en/components/overlays/ https://next.vuetifyjs.com/en/components/overlays/

[jalamanderman]

I'm also experiencing this issue.

[atilkan]

Lets wait for this PR to be merged.

[rafaeldsousa]

@atilkan I'm not entirely sure this relates to the focus being set on overlays or any dynamically created elements. Looking at the code for v-navigation-drawer doesn't look like the focus is set anywhere.